stackoom
  简体   繁体   中英

How to make my topnav sticky using javascript?

 原文  2021-03-08 17:42:03  6   1    javascript/ html/ css

Question

I have a menu on my website that works as expected and i've seen a tutorial from W3Schools. Here it is: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp .

So i put in the css, javascript but as i scroll down the page it doesn't actually work. It could be that my list/topnav is not a div container but i'm not sure.

Here's my home page: 

 window.onscroll = function() {myFunction()}; var navbar = document.getElementById("navbar"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } }
 * { overflow:auto; /* or auto */ } body { margin: 0; background-color: #e5e5e5; }.topButton { position: fixed; /* Fixed/sticky position */ bottom: 20px; /* Place the button at the bottom of the page */ right: 30px; /* Place the button 30px from the right */ z-index: 99; /* Make sure it does not overlap */ border: none; /* Remove borders */ outline: none; /* Remove outline */ background-color:#bbb; /* Set a background color */ color: white; /* Text color */ cursor: pointer; /* Add a mouse pointer on hover */ padding: 15px; /* Some padding */ border-radius: 10px; /* Rounded corners */ font-size: 18px; /* Increase font size */ opacity: 0; }.topButton:hover { transition: 0.3s; opacity: 1; background-color: #555; /* Add a dark-grey background on hover */ box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); } h1 { font-family: 'Bebas Neue', cursive; background-color: #e5e5e5; text-align: center; padding: 0; }.sticky { position: fixed; top: 0; width: 100%; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #e5e5e5; font-family: 'Titillium Web', sans-serif; }.sticky { position: fixed; top: 0; width: 100%; } li { float: left; border-right:1px solid #bbb; } li a { display: block; color: black; text-align: center; padding: 14px 48px; text-decoration: none; } li a:hover { background-color: #696969 } li a.active { background-color: #696969; color: black; font-weight: 900; }.sign-in { border-left:1px solid #bbb }
 <body> <div class="header" style="background-color: #e5e5e5;"> <a><img src="/Assets/Images/banner-logo.png" height="100" width="300" style="display:block; margin:auto;"></img></a> <hr style="margin: 0;"> <ul style="margin-top: 0;" id="navbar"> <li><a href="/HTML/pages/webhosting.html">Web Hosting</a></li> <li><a href="/HTML/pages/vps.html">VPS</a></li> <li><a href="/HTML/pages/pricing.html">Pricing</a></li> <li><a href="/HTML/pages/about.html">About</a></li> <li><a href="/HTML/pages/contact.html">Contact</a></li> <li><a href="/HTML/pages/guides.html">Guides</a></li> <li style="float:right; border-right:none;"><a href="#Sign In" class="sign-in">Sign In</a></li> <script src="Assets/JS/sticky-nav.js"></script> </ul> <hr style="margin: 0;"> </div> <div style="background-color:black;color:white;padding:30px">Scroll Down</div> <div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible <strong>when the user starts to scroll the page</strong>.</div> <button class="topButton" onclick="topFunction()" id="myBtn" title="Go to top"><img src="Assets/Images/top-of-page-arrow.png" style="align-self: center;" width="47.3" height="31.6"></button> <script src="Assets/JS/top-button.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </body> </html>

I'm stuck on how to implement their code. Help is appreciated

1 answers

solution1
 0  2021-03-08 18:29:10

My code is right, the website works with mobile. I believe it could be the cache that is causing the problem or it could be the sizing of the window. 

 window.onscroll = function() {myFunction()}; var navbar = document.getElementById("navbar"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } }
 * { overflow:auto; /* or auto */ } body { margin: 0; background-color: #e5e5e5; }.topButton { position: fixed; /* Fixed/sticky position */ bottom: 20px; /* Place the button at the bottom of the page */ right: 30px; /* Place the button 30px from the right */ z-index: 99; /* Make sure it does not overlap */ border: none; /* Remove borders */ outline: none; /* Remove outline */ background-color:#bbb; /* Set a background color */ color: white; /* Text color */ cursor: pointer; /* Add a mouse pointer on hover */ padding: 15px; /* Some padding */ border-radius: 10px; /* Rounded corners */ font-size: 18px; /* Increase font size */ opacity: 0; }.topButton:hover { transition: 0.3s; opacity: 1; background-color: #555; /* Add a dark-grey background on hover */ box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); } h1 { font-family: 'Bebas Neue', cursive; background-color: #e5e5e5; text-align: center; padding: 0; }.sticky { position: fixed; top: 0; width: 100%; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #e5e5e5; font-family: 'Titillium Web', sans-serif; }.sticky { position: fixed; top: 0; width: 100%; } li { float: left; border-right:1px solid #bbb; } li a { display: block; color: black; text-align: center; padding: 14px 48px; text-decoration: none; } li a:hover { background-color: #696969 } li a.active { background-color: #696969; color: black; font-weight: 900; }.sign-in { border-left:1px solid #bbb }
 <body> <div class="header" style="background-color: #e5e5e5;"> <a><img src="/Assets/Images/banner-logo.png" height="100" width="300" style="display:block; margin:auto;"></img></a> <hr style="margin: 0;"> <ul style="margin-top: 0;" id="navbar"> <li><a href="/HTML/pages/webhosting.html">Web Hosting</a></li> <li><a href="/HTML/pages/vps.html">VPS</a></li> <li><a href="/HTML/pages/pricing.html">Pricing</a></li> <li><a href="/HTML/pages/about.html">About</a></li> <li><a href="/HTML/pages/contact.html">Contact</a></li> <li><a href="/HTML/pages/guides.html">Guides</a></li> <li style="float:right; border-right:none;"><a href="#Sign In" class="sign-in">Sign In</a></li> <script src="Assets/JS/sticky-nav.js"></script> </ul> <hr style="margin: 0;"> </div> <div style="background-color:black;color:white;padding:30px">Scroll Down</div> <div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible <strong>when the user starts to scroll the page</strong>.</div> <button class="topButton" onclick="topFunction()" id="myBtn" title="Go to top"><img src="Assets/Images/top-of-page-arrow.png" style="align-self: center;" width="47.3" height="31.6"></button> <script src="Assets/JS/top-button.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </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 menubar in html using javascript how to make css responsive topnav slide in and out How to make my navbar sticky in mobile view? How to make left and right divs sticky to the top on scroll at some point using JavaScript or jQuery? How to get a Sticky header on website using Javascript? How do I make my navigation stay sticky and responsive using a logo image? Using react-sticky to make a sticky header How to make a sticky navbar? How do I make my Sticky NavBar Scroll Animate properly? How to Make sticky Header
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM