Why isn't position: sticky affecting my navbar?
Question
There is no overflow property for parent elements. The parent element has a set height. The navigation bar simply won't be sticky no matter what I try. It doesn't work with JavaScript either. I must be missing something. Below is the code. Somebody please tell me what I did wrong:
/* Body */ body{ margin: 0; position: relative; height: 100%; } /* Header */ .header{ font-family: sans-serif; font-weight: 900; background-color: #04042b; color: #de215a; text-align: center; font-size: 200%; width: 100%; } .header h1{ margin: 0; line-height: 1; padding-top: 4%; padding-bottom: 4%; } /* Navigation Bar */ .navbar{ background-color: #000005; position: sticky; top: 0; overflow: hidden; } .navbar a{ float: left; color: #FFFFE0; text-align: center; text-decoration: none; font-size: 130%; padding: 2%; } .navbar a:hover{ background-color:#E6E6FA ; color: black; } .navbar a.active{ background-color: #4682B4; color: white; } article img{ height: 100% }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="refresh" content="30"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Stuff</title> <link rel="stylesheet" type="text/css" href="Mainsheet.css"> <script src="Mainscript.js"type="application/javascript" ></script> </head> <body> <header> <div class="header"> <h1>Stuff</h1> </div> </header> <nav> <div class="navbar"> <a class="active" href="">Home</a> <a href="">Projects</a> <a href="">News</a> <a href="">About</a> <a href="">Forum</a> <a href="">Contact</a> <a href="">Funding&FAQ </a> </div> </nav> <article> <h3>Sticky Navigation Example</h3> <p>The navbar will stick to the top when you reach its scroll position.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> </article> </body> </html>
3 answers
solution1
3 2018-03-21 18:51:53
Try moving the styles you have for .navbar to the parent nav root level element (so it sticks to the parent body ).
nav {
background-color: #000005;
position: sticky;
top: 0;
overflow: hidden;
}
/* Body */ body{ margin: 0; position: relative; height: 100%; } /* Header */ .header{ font-family: sans-serif; font-weight: 900; background-color: #04042b; color: #de215a; text-align: center; font-size: 200%; width: 100%; } .header h1{ margin: 0; line-height: 1; padding-top: 4%; padding-bottom: 4%; } /* Navigation Bar */ nav{ background-color: #000005; position: sticky; top: 0; overflow: hidden; } .navbar a{ float: left; color: #FFFFE0; text-align: center; text-decoration: none; font-size: 130%; padding: 2%; } .navbar a:hover{ background-color:#E6E6FA ; color: black; } .navbar a.active{ background-color: #4682B4; color: white; } article img{ height: 100% }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="refresh" content="30"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Stuff</title> <link rel="stylesheet" type="text/css" href="Mainsheet.css"> <script src="Mainscript.js"type="application/javascript" ></script> </head> <body> <header> <div class="header"> <h1>Stuff</h1> </div> </header> <nav> <div class="navbar"> <a class="active" href="">Home</a> <a href="">Projects</a> <a href="">News</a> <a href="">About</a> <a href="">Forum</a> <a href="">Contact</a> <a href="">Funding&FAQ </a> </div> </nav> <article> <h3>Sticky Navigation Example</h3> <p>The navbar will stick to the top when you reach its scroll position.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> </article> </body> </html>
solution2
3 2018-03-21 18:53:01
Position sticky depends on the parent container. Move nav inside your navbar .
<body>
<header>
<div class="header">
<h1>Stuff</h1>
</div>
</header>
<div class="navbar">
<nav>
<a class="active" href="">Home</a>
<a href="">Projects</a>
</nav>
</div>
...
solution3
0 2018-03-21 19:07:43
If I understand well, when you are scrolling you want header and stays on top. You should add to .header position fixed and .navbar position: fixed; top: 160px;. Finally to article you should add the summary of height from .header and .navbar . In your case 232px.
/* Header */
.header{
font-family: sans-serif;
font-weight: 900;
background-color: #04042b;
color: #de215a;
text-align: center;
font-size: 200%;
width: 100%;
position:fixed;
top:0;
}
/* Navigation Bar */
.navbar{
background-color: #000005;
position: fixed;
top: 160px;
overflow: hidden;
width:100%;
}
article {
padding-top:232px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why isn't position sticky working on my blog article page?
Why is my responsive navbar isn't working?
Why won't my sticky navbar work on mobile?
Why isn't my navbar appearing on my website?
Why isn't my javascript-rendered navbar being crawled?
Why isn't my navbar text on the same line?
Why isn't my dropdown menu working on navbar?
Navbar issue with sticky position
Why my carousel doesn't get down under my sticky navbar?
Why my font color in navbar didn't change when i toggle to sticky?
Related Tags