我的一页网站遇到了问题。
我制作了一个粘性导航，它在您开始滚动时具有背景，我将其与单击滚动功能结合在一起。因此，如果您在导航菜单中单击“关于”，它将转到页面上的该部分。我已经使用ID链接来做到这一点。
我的问题是我不知道如何调整其位置。
我希望它的边距与粘性导航的大小相同。关于如何解决此问题的任何投入？
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#Produktet {
padding-bottom: 200px;
}
html, body {
background-color: #fff;
color: #000000;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 1.1rem;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
h1, h2, h3 {
font-weight: 300;
text-transform: uppercase;
}
h1 {
margin-top: 0;
margin-bottom: 2%;
color: #fff;
font-size: 2.4em;
word-spacing: 0.8%;
letter-spacing: 0.4%;
font-weight: bold;
}
h2 {
font-size: 1.8em;
word-spacing: 0.4%;
text-align: center;
margin-bottom: 3,5%;
letter-spacing: 0.4%;
}
h3 {
font-size: 1.1em;
margin-bottom: 4%;
}
h2:after {
display: block;
height: 0.4%;
background-color: #FFD700;
content: " ";
width: 10%;
margin: 0 auto;
margin-top: 3%;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("img/citera hjemmeside baggrund (mindre).png");
background-size: cover;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
.logo {
height: 110px;
width: auto;
float: left;
margin-top: 1%;
margin-left: 3%;
}
.logo2 {
width: 200px;
height: auto;
padding-top: 2%;
}
.logo3 {
width: 200px;
height: auto;
padding-top: 2%;
}
.hero-text-box h3 {
color: white;
margin-bottom: 5%;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hero-text-box h1, h3{
position: relative;
animation: heading;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes heading{
0%{top: -500px}
100%{top: 15px}
}
.top-box h2 {
font-weight: bold;
}
.showcase {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
}
.showcase img {
width: 300%;
height: 100%;
}
.showcase-left img {
margin-top: 5%;
}
.showcase-right {
margin-top: -5%;
margin-bottom: 20%;
margin-right: 15%;
}
.showcase-right p {
text-align: center;
margin-right: 10%;
}
.showcase-right h2 {
margin-top: 30%;
margin-right: 10%
}
.showcase-right h2 {
font-weight: bold;
}
.box-me{
background-color: #E0E0E0;
padding: 40px;
}
/* ----- BUTTONS ----- */
.btn:link,
.btn:visited,
input[type=submit] {
display: inline-block;
padding: 1% 3%;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
-webkit-transition: background-color 0.2s, border 0.2s, color 0.2s;
transition: background-color 0.2s, border 0.2s, color 0.2s;
}
.btn-full:link,
.btn-full:visited,
input[type=submit] {
background-color: #FFD700;
border: 1px solid #FFD700;
color: #000000;
margin-right: 3%;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #FFD700;
color: #FFFFFF;
}
.btn:hover,
.btn:active,
input[type=submit]:hover,
input[type=submit]:active {
background-color: #FFD700;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #FFD700;
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #FFD700;
color: #000;
}
.btn{
opacity: 0;
animation-name: btn;
animation-duration: 3s;
animation-delay: 3s;
animation-fill-mode: forwards;
transition-property: transform;
transition-duration: 1s;
}
@keyframes btn{
0% {opacity: 0}
100%{opacity: 1}
}
/* Main navi */
.main-nav {
float: left;
list-style: none;
margin-top: 1.5%;
margin-right: 10%;
transition: background-color 200ms linear;
padding-right: 4%;
padding-bottom: 2%;
padding-top: 2%;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding: 8px 0;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
}
.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid #FFD700;
}
/*__________________________*/
.long-copy {
line-height: 145%;
width: 70%;
margin-left: 15%;
margin-top: 0.5%;
}
.container {
display: grid;
grid-gap: 2%;
text-align: center;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
padding: 60px;
}
.container2 {
display: grid;
text-align: center;
grid-gap: 6%;
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
padding-bottom: 60px;
background-color: #E0E0E0;
}
.center_text {
display: grid;
text-align: center;
background-color: #E0E0E0;
padding-top: 3%;
}
.center_text h2 {
font-weight: bold;
}
.fas {
color: #FFD700;
margin-bottom: 8%;
}
.case1 h2 {
margin-top: 10%;
font-size: 200%;
font-weight: bold;
margin-left: -35%;
}
.case1 p {
text-align: left;
margin-top: 10%;
}
.find {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
margin-left: 15%;
margin-right: 10%;
}
.case2 img {
margin-top: 30%;
margin-bottom: 10%;
border-radius: 25px;
width: 400px;
}
/*FOOTER*/
footer {
background-color: #000;
font-size: 80%;
color: #FFFFFF;
font-weight: bold;
text-align: center;
padding-top: 40px;
padding-bottom: 40px;
}
#facebook {
padding-left: 0.5%;
color: #3B5998;
}
/*Sticky navbar*/
/* Page content */
.content {
padding: 16px;
}
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
position: fixed;
top: 0;
width: 100%;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
padding-top: 60px;
}
/* Sets the backgound color of the navbar */
.nav-color {
background: #40717f;
opacity: 0.9;
}
/* Big tablet to 1200px (widths smaller than the 1140px row) */
@media only screen and (max-width: 1200px) {
.hero-text-box {
width: 100%;
padding: 0 4%;
}
.row { padding: 0 2%; }
}
/* Small tablet to big tablet: from 768px to 1023px */
@media only screen and (max-width: 1023px) {
body { font-size: 18px; }
section { padding: 60px 0; }
.long-copy {
width: 80%;
margin-left: 10%;
}
}
.case2 img {
margin-top: 30%;
margin-bottom: 20%;
border-radius: 25px;
width: 300px;
grid-gap: 40px;
width: 100%;
}
/* Small phones to small tablets: from 481px to 767px */
@media only screen and (max-width: 767px) {
body { font-size: 16px; }
section { padding: 30px 0; }
header {
background-position: 700px;
}
.main-nav {
float: left;
margin-top: 30px;
margin-left: 25px;
}
.main-nav li {
display: block;
}
.main-nav li a:link,
.main-nav li a:visited {
display: block;
border: 0;
padding: 10px 0;
font-size: 100%;
}
.main-nav li a:hover{
border-bottom: 2px solid #FFD700;
}
.showcase {
display: grid;
grid-template-rows: repeat(auto-fit, minmax(400px, 1fr));
margin-left: 25%;
}
h1 { font-size: 180%; }
h2 { font-size: 150%; }
.all{
display: grid;
grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
}
.case2 img {
margin-top: 40%;
margin-bottom: 20%;
border-radius: 25px;
width: 300px;
grid-gap: 40px;
width: 100%;
}
/* Style the navbar */
#navbar {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>citrea</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
</head>
<body>
<a id="logo3"></a>
<header>
<nav id="navbar">
<a href="#logo3"><img src="img/Logo (mindre).png" class="logo" alt="citera_logo"></a>
<ul class="main-nav">
<li><a href="#produktet">produktet</a></li>
<li><a href="#om_citrea">om citrea</a></li>
<li><a href="#kontakt">kontakt</a></li>
</ul>
</nav>
<article class="hero-text-box">
<h1>CITREA</h1>
<h3>Vand med et shot af citron </h3>
<a class="btn btn-full" href="#køb_her">Køb her</a>
<a class="btn btn-ghost" href="#læs_mere">Læs mere</a>
</article>
</header>
<a id="læs_mere"></a>
<a id="produktet"></a>
<section class="box-me">
<article class="top-box">
<h2>Drik vand med CITREA</h2>
<p class="long-copy">
Vand er en nødvendighed i hverdagen, for at kunne opretholde din krops væskebalance. Da din krop mister mellem 2,5-3 liter vand om dagen. Og dette skal erstattes for at holde din krop sund. Vores hjerne består af 85% vand, og hvis den ikke er dehydreret kan der kommer negative effekter. Der samme med vores blod som består af 95% vand. Der skal vand med til og regulere blodtrykket. Dit hjerte består af 77% vand, som bruges til og reducere hjertesygdomme.Din nyre består af 73% vand, som bruges til og omdanne fedt til energi og dine lunger består af 80% som bruges til og optage ilt. // CITREA
</p>
</article>
<article class="container">
<article class="box1">
<i class="fas fa-tint fa-3x"></i>
<h3>Vand er Essentielt</h3>
<p>Det essentielt at skulle drikker 1,5-2 liter vand om dagen for at opretholde væskebalancen.</p>
</article>
<article class="box2">
<i class="fas fa-lemon fa-3x"></i>
<h3>Fordele ved citron</h3>
<p>Der er mange fordele så som c-vitaminer, immunforsvaret og fordøjelse m.m ved citroner.</p>
</article>
<article class="box3">
<i class="fas fa-utensils fa-3x"></i>
<h3>100% organisk</h3>
<p>Vi gør kun brug af 100% økologiske citroner, til at udarbejde smagene og skiverne i vanden.</p>
</article>
<article class="box4">
<i class="fas fa-shopping-cart fa-3x"></i>
<h3>Hvor kan det købes</h3>
<p>Du kan finde os i din nærmeste supermarked, 7-eleven og tankstationer.</p>
</article>
</article>
</section>
<hr>
<section class="collo">
<article class="showcase">
<img src="img/side baggrund.png" alt="Baggrund med flaske">
<article class="showcase-left">
</article>
<article id="om_citrea" class="showcase-right">
<h2>OM CITREA</h2>
<p>
Citrea er vand med et shot af citron saft i. Da vand er en essentielt ting i hverdagen og citroner kan gøre underværker, såsom forebygge forstoppelse, regulere blodtrykket, udskiller affaldsstoffer og styrke dit immunforsvar m.m. Der er mange fordele ved citroner. Så vi har taget det mest essentielle i din hverdag, sammen med et produkt der kan give tilskud der styrker din livsstil. Så drik din vand med CITREA.
</p>
</article>
</article>
</section>
<hr>
<a id="køb_her"></a>
<article class="center_text">
<h2>Køb her</h2>
</article>
<section class="container2">
<article class=box5>
<h3>7-Eleven</h3>
<p>Du kan købe Citrea hos alle 7-Eleven butikker i hele landet</p>
<img src="img/7-Eleven-Logo.png" class="logo2" alt="7-eleven logo">
</article>
<article class=box6>
<h3>Fitness World</h3>
<p>Du kan du vælge Citrea i dit All In abonnement i dag hos Fitness World</p>
<img src="img/fitness-world-300x109.png" class="logo3" alt="fitness world logo">
</article>
</section>
<hr>
<article id="kontakt" class="all">
<section class="find">
<article class="case1">
<h2>Kontakt & Find os</h2>
<p>Adresse: Maglekildevej 7, Frederiksberg</p>
<p>Email: Info@Citrea.dk </p>
<p>Telefon: +45 40404040 </p>
<p>Åbningstider: Mandag-fredag kl: 08-15. </p>
</article>
<article class="case2">
<img src="img/maps.PNG" alt="Google maps">
</article>
</section>
</article>
<footer>
<p>CITREA © KØBENHAVN, DANMARK 2018
<a href="https://www.facebook.com/Citrea-265740650959233/?modal=admin_todo_tour"><i id="facebook" class="fab fa-facebook-square fa-3x"></i></a>
</p>
</footer>
<!--Javascript-->
<script type="text/javascript">
// Source: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Changes the background color when scrolling
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll > 1) {
navbar.classList.add("sticky", "nav-color")
} else {
navbar.classList.remove("sticky", "nav-color");
}
})
})
</script>
<!--javascript-->
</body>
</html>
答案 0 :(得分：1)
使用此
var scroll = $(window).scrollTop() - $('#navbar').outerHeight();
代替
var scroll = $(window).scrollTop()
选中此jsfiddle
答案 1 :(得分：1)
考虑到导航栏的高度，您需要将单击事件绑定到导航链接以处理滚动-请注意，我还在代码中添加了一个clearfix，以便您可以计算导航栏的高度
var $window = $(window),
$navbar = $('#navbar');
// just changed this to use jquery
$window.scroll(function() {
var scroll = $window.scrollTop();
if (scroll > 1) {
$navbar.addClass("sticky nav-color");
} else {
$navbar.removeClass("sticky nav-color");
}
});
// this is what you want
$navbar.find('a') // get the links
.on('click', function(e) { // bind click
e.preventDefault(); // prevent default action of the link
var $thisLink = $(this), // get the clicked link
$targetElement = $($thisLink.attr('href')), // get the target element
scrollPosition = $targetElement.offset().top - $navbar.outerHeight(); // calculate the new scroll position
$('body,html').animate({ // animate the scroll
scrollTop: scrollPosition + 'px'
});
});@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#Produktet {
padding-bottom: 200px;
}
html,
body {
background-color: #fff;
color: #000000;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 1.1rem;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
h1,
h2,
h3 {
font-weight: 300;
text-transform: uppercase;
}
h1 {
margin-top: 0;
margin-bottom: 2%;
color: #fff;
font-size: 2.4em;
word-spacing: 0.8%;
letter-spacing: 0.4%;
font-weight: bold;
}
h2 {
font-size: 1.8em;
word-spacing: 0.4%;
text-align: center;
margin-bottom: 3, 5%;
letter-spacing: 0.4%;
}
h3 {
font-size: 1.1em;
margin-bottom: 4%;
}
h2:after {
display: block;
height: 0.4%;
background-color: #FFD700;
content: " ";
width: 10%;
margin: 0 auto;
margin-top: 3%;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("img/citera hjemmeside baggrund (mindre).png");
background-size: cover;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
.logo {
height: 110px;
width: auto;
float: left;
margin-top: 1%;
margin-left: 3%;
}
.logo2 {
width: 200px;
height: auto;
padding-top: 2%;
}
.logo3 {
width: 200px;
height: auto;
padding-top: 2%;
}
.hero-text-box h3 {
color: white;
margin-bottom: 5%;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hero-text-box h1,
h3 {
position: relative;
animation: heading;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes heading {
0% {
top: -500px
}
100% {
top: 15px
}
}
.top-box h2 {
font-weight: bold;
}
.showcase {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
}
.showcase img {
width: 300%;
height: 100%;
}
.showcase-left img {
margin-top: 5%;
}
.showcase-right {
margin-top: -5%;
margin-bottom: 20%;
margin-right: 15%;
}
.showcase-right p {
text-align: center;
margin-right: 10%;
}
.showcase-right h2 {
margin-top: 30%;
margin-right: 10%
}
.showcase-right h2 {
font-weight: bold;
}
.box-me {
background-color: #E0E0E0;
padding: 40px;
}
/* ----- BUTTONS ----- */
.btn:link,
.btn:visited,
input[type=submit] {
display: inline-block;
padding: 1% 3%;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
-webkit-transition: background-color 0.2s, border 0.2s, color 0.2s;
transition: background-color 0.2s, border 0.2s, color 0.2s;
}
.btn-full:link,
.btn-full:visited,
input[type=submit] {
background-color: #FFD700;
border: 1px solid #FFD700;
color: #000000;
margin-right: 3%;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #FFD700;
color: #FFFFFF;
}
.btn:hover,
.btn:active,
input[type=submit]:hover,
input[type=submit]:active {
background-color: #FFD700;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #FFD700;
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #FFD700;
color: #000;
}
.btn {
opacity: 0;
animation-name: btn;
animation-duration: 3s;
animation-delay: 3s;
animation-fill-mode: forwards;
transition-property: transform;
transition-duration: 1s;
}
@keyframes btn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
/* Main navi */
.clearfix:after {
content: '';
display: block;
clear: both;
height: 0;
overflow: hidden;
}
.main-nav {
float: left;
list-style: none;
margin-top: 1.5%;
margin-right: 10%;
transition: background-color 200ms linear;
padding-right: 4%;
padding-bottom: 2%;
padding-top: 2%;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding: 8px 0;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
}
.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid #FFD700;
}
/*__________________________*/
.long-copy {
line-height: 145%;
width: 70%;
margin-left: 15%;
margin-top: 0.5%;
}
.container {
display: grid;
grid-gap: 2%;
text-align: center;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
padding: 60px;
}
.container2 {
display: grid;
text-align: center;
grid-gap: 6%;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
padding-bottom: 60px;
background-color: #E0E0E0;
}
.center_text {
display: grid;
text-align: center;
background-color: #E0E0E0;
padding-top: 3%;
}
.center_text h2 {
font-weight: bold;
}
.fas {
color: #FFD700;
margin-bottom: 8%;
}
.case1 h2 {
margin-top: 10%;
font-size: 200%;
font-weight: bold;
margin-left: -35%;
}
.case1 p {
text-align: left;
margin-top: 10%;
}
.find {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
margin-left: 15%;
margin-right: 10%;
}
.case2 img {
margin-top: 30%;
margin-bottom: 10%;
border-radius: 25px;
width: 400px;
}
/*FOOTER*/
footer {
background-color: #000;
font-size: 80%;
color: #FFFFFF;
font-weight: bold;
text-align: center;
padding-top: 40px;
padding-bottom: 40px;
}
#facebook {
padding-left: 0.5%;
color: #3B5998;
}
/*Sticky navbar*/
/* Page content */
.content {
padding: 16px;
}
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky+.content {
padding-top: 60px;
}
/* Sets the backgound color of the navbar */
.nav-color {
background: #40717f;
opacity: 0.9;
}
/* Big tablet to 1200px (widths smaller than the 1140px row) */
@media only screen and (max-width: 1200px) {
.hero-text-box {
width: 100%;
padding: 0 4%;
}
.row {
padding: 0 2%;
}
}
/* Small tablet to big tablet: from 768px to 1023px */
@media only screen and (max-width: 1023px) {
body {
font-size: 18px;
}
section {
padding: 60px 0;
}
.long-copy {
width: 80%;
margin-left: 10%;
}
}
.case2 img {
margin-top: 30%;
margin-bottom: 20%;
border-radius: 25px;
width: 300px;
grid-gap: 40px;
width: 100%;
}
/* Small phones to small tablets: from 481px to 767px */
@media only screen and (max-width: 767px) {
body {
font-size: 16px;
}
section {
padding: 30px 0;
}
header {
background-position: 700px;
}
.main-nav {
float: left;
margin-top: 30px;
margin-left: 25px;
}
.main-nav li {
display: block;
}
.main-nav li a:link,
.main-nav li a:visited {
display: block;
border: 0;
padding: 10px 0;
font-size: 100%;
}
.main-nav li a:hover {
border-bottom: 2px solid #FFD700;
}
.showcase {
display: grid;
grid-template-rows: repeat(auto-fit, minmax(400px, 1fr));
margin-left: 25%;
}
h1 {
font-size: 180%;
}
h2 {
font-size: 150%;
}
.all {
display: grid;
grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
}
.case2 img {
margin-top: 40%;
margin-bottom: 20%;
border-radius: 25px;
width: 300px;
grid-gap: 40px;
width: 100%;
}
/* Style the navbar */
#navbar {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
}<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<a id="logo3"></a>
<header>
<nav id="navbar" class="clearfix">
<a href="#logo3"><img src="img/Logo (mindre).png" class="logo" alt="citera_logo"></a>
<ul class="main-nav">
<li><a href="#produktet">produktet</a></li>
<li><a href="#om_citrea">om citrea</a></li>
<li><a href="#kontakt">kontakt</a></li>
</ul>
</nav>
<article class="hero-text-box">
<h1>CITREA</h1>
<h3>Vand med et shot af citron </h3>
<a class="btn btn-full" href="#køb_her">Køb her</a>
<a class="btn btn-ghost" href="#læs_mere">Læs mere</a>
</article>
</header>
<a id="læs_mere"></a>
<a id="produktet"></a>
<section class="box-me">
<article class="top-box">
<h2>Drik vand med CITREA</h2>
<p class="long-copy">
Vand er en nødvendighed i hverdagen, for at kunne opretholde din krops væskebalance. Da din krop mister mellem 2,5-3 liter vand om dagen. Og dette skal erstattes for at holde din krop sund. Vores hjerne består af 85% vand, og hvis den ikke er dehydreret
kan der kommer negative effekter. Der samme med vores blod som består af 95% vand. Der skal vand med til og regulere blodtrykket. Dit hjerte består af 77% vand, som bruges til og reducere hjertesygdomme.Din nyre består af 73% vand, som bruges til
og omdanne fedt til energi og dine lunger består af 80% som bruges til og optage ilt. // CITREA
</p>
</article>
<article class="container">
<article class="box1">
<i class="fas fa-tint fa-3x"></i>
<h3>Vand er Essentielt</h3>
<p>Det essentielt at skulle drikker 1,5-2 liter vand om dagen for at opretholde væskebalancen.</p>
</article>
<article class="box2">
<i class="fas fa-lemon fa-3x"></i>
<h3>Fordele ved citron</h3>
<p>Der er mange fordele så som c-vitaminer, immunforsvaret og fordøjelse m.m ved citroner.</p>
</article>
<article class="box3">
<i class="fas fa-utensils fa-3x"></i>
<h3>100% organisk</h3>
<p>Vi gør kun brug af 100% økologiske citroner, til at udarbejde smagene og skiverne i vanden.</p>
</article>
<article class="box4">
<i class="fas fa-shopping-cart fa-3x"></i>
<h3>Hvor kan det købes</h3>
<p>Du kan finde os i din nærmeste supermarked, 7-eleven og tankstationer.</p>
</article>
</article>
</section>
<hr>
<section class="collo">
<article class="showcase">
<img src="img/side baggrund.png" alt="Baggrund med flaske">
<article class="showcase-left">
</article>
<article id="om_citrea" class="showcase-right">
<h2>OM CITREA</h2>
<p>
Citrea er vand med et shot af citron saft i. Da vand er en essentielt ting i hverdagen og citroner kan gøre underværker, såsom forebygge forstoppelse, regulere blodtrykket, udskiller affaldsstoffer og styrke dit immunforsvar m.m. Der er mange fordele
ved citroner. Så vi har taget det mest essentielle i din hverdag, sammen med et produkt der kan give tilskud der styrker din livsstil. Så drik din vand med CITREA.
</p>
</article>
</article>
</section>
<hr>
<a id="køb_her"></a>
<article class="center_text">
<h2>Køb her</h2>
</article>
<section class="container2">
<article class=box5>
<h3>7-Eleven</h3>
<p>Du kan købe Citrea hos alle 7-Eleven butikker i hele landet</p>
<img src="img/7-Eleven-Logo.png" class="logo2" alt="7-eleven logo">
</article>
<article class=box6>
<h3>Fitness World</h3>
<p>Du kan du vælge Citrea i dit All In abonnement i dag hos Fitness World</p>
<img src="img/fitness-world-300x109.png" class="logo3" alt="fitness world logo">
</article>
</section>
<hr>
<article id="kontakt" class="all">
<section class="find">
<article class="case1">
<h2>Kontakt & Find os</h2>
<p>Adresse: Maglekildevej 7, Frederiksberg</p>
<p>Email: Info@Citrea.dk </p>
<p>Telefon: +45 40404040 </p>
<p>Åbningstider: Mandag-fredag kl: 08-15. </p>
</article>
<article class="case2">
<img src="img/maps.PNG" alt="Google maps">
</article>
</section>
</article>
<footer>
<p>CITREA © KØBENHAVN, DANMARK 2018
<a href="https://www.facebook.com/Citrea-265740650959233/?modal=admin_todo_tour"><i id="facebook" class="fab fa-facebook-square fa-3x"></i></a>
</p>
</footer>
<!--Javascript-->
<script type="text/javascript">
// Source: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Changes the background color when scrolling
$(document).ready(function() {})
</script>
<!--javascript-->