Can't make a sticky navbar
Question
I am having a rough time right now trying to make my sticky navbar. I did it a while ago but i've added 9 article cards with some js effects and then when i was scrolling the navbar was alwyas under the cards. So later i was trying to fix it when i messed up somewhere and now i can't find my mistake. PS i am new with programming, so i don't have much experience.
// When the user scrolls the page, execute myFunction window.onscroll = function() {myFunction()}; // Get the navbar var navbar = document.getElementsById("navbar"); // Get the offset position of the navbar var sticky = navbar.offsetTop; // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } }
/* NAVIGATION */ nav { width: 100%; background: #9E0B0D; overflow: hidden; } nav ul { list-style: none; text-align: center; } nav ul li { display: inline-block; margin-left: 25px; margin-right: 25px; height: 40px; } nav ul li a { display: block; padding-right: 15px; padding-left: 15px; text-decoration: none; color: #aaa; font-weight: 800; text-transform: uppercase; margin: 0 10px; } nav ul li a, nav ul li a:after, nav ul li a:before { transition: all .5s; } nav ul li a:hover { color: #555; } #navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding-top: 14px; padding-right: 14px; padding-left: 14px; text-decoration: none; padding-bottom: 14px; } .sticky { position: fixed; top: 0; width: 100%; } .sticky + .content { padding-top: 60px; } /* SHIFT */ #navbar ul li a { position:relative; z-index: 1; } #navbar ul li a:hover { color: #91640F; } #navbar ul li a:after { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 100%; height: 1px; content: '.'; color: transparent; background: #F1C40F; visibility: none; opacity: 0; z-index: -1; } #navbar ul li a:hover:after { opacity: 1; visibility: visible; height: 100%; }
<nav id="navbar"> <ul> <li><a href="######.html">Начало</a></li> <li><a href="######.html">Федерацията</a></li> <li><a href="Clubs.html">Клубове</a></li> <li><a href="######.html">Календар</a></li> <li><a href="######.html">Галерия</a></li> <li><a href="######.html">Новини</a></li> </ul> </nav>
2 answers
solution1
1 2018-10-03 16:57:26
您正在使用document.getElementsById("navbar")时，应使用document.getElementById("navbar") 。
solution2
0
I have a sticky Nav Bar here:
<!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: -webkit-sticky; /* Safari */ position: sticky; top: 0; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } .active { background-color: #4CAF50; } </style> </head> <body> <div class="header"> <h2>Scroll Down</h2> <p>Scroll down to see the sticky effect.</p> </div> <ul> <li><a class="active" href="#home">Начало</a></li> <li><a href="#news">Федерацията</a></li> <li><a href="#contact">Клубове</a></li> <li><a href="#contact">Календар</a></li> <li><a href="#contact">Галерия</a></li> <li><a href="#contact">Новини</a></li> </ul> <h3>Sticky Navigation Bar Example</h3> <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p> <p><strong>Note:</strong> Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a -webkit- prefix.</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> </body> </html>
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
How to make a sticky navbar?
Make the Bootstrap Navbar Sticky
How I can make sticky navbar using bootstrap?
How to use IntersectionObserver API to make navBar sticky
Bootstrap, make a navbar sticky after scrolling down?
How to make my navbar sticky in mobile view?
How to make a sticky navbar in R shiny?
Can’t Make the navbar in mobile view
How can I make my sticky navbar stay at the front in Chakra-UI
how can I make this (sticky, full-width) navbar using Bootstrap?
Related Tags