Sticky navbar hides content when scrolling to top
Question
I have a sticky navbar. When the page loads, the first home div displays properly. But, after scrolling down, and then back up, some of the content from the home div is hidden by the sticky nav bar at the top. How can I fix this behavior? Any suggestions are appreciated!
window.onscroll = () => { myFunction() }; const navbar = document.getElementById("navbar"); const sticky = navbar.offsetTop; myFunction = () => { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } }
body { padding: 0px; margin: 0px; } #navbar { overflow: hidden; background-color: #000; } #navbar a { float: right; display: block; text-align: center; padding: 1vw; text-decoration: none; font-family: 'Muli', sans-serif; font-size: 2.5vw; font-weight: 400; font-style: italic; } .color-nav a { color: white; } .active { background-color: #fff; color: black !important; } .sticky { position: fixed; top: 0; width: 100%; } .main-section { height: 45vw; }
<body> <header> <nav> <div class='color-nav' id="navbar"> <a id='contact-link' href="#contact">Contact</a> <a id="about-link" href="#about">About</a> <a id='portfolio-link' href="#portfolio">Portfolio</a> <a id='home-link' class="active" href="#home">Home</a> </div> </nav> </header> <section> <div id='home-1' class="home main-section"> </div> </section> <section> <div id="portfolio-1" class="portfolio main-section"> </div> </section> <section> <div id="about-1" class='about main-section'> </div> </section> <section> <div id='contact-1' class='contact main-section'> </div> </section> </body>
3 answers
solution1
1 2018-11-26 06:02:22
The problem is that when you scroll you are adding the position of fixed to the #navbar so you are taking it out of the flow of the page and fixing it to the screen. In doing this you are taking it out of the <nav> and the <header> and these elements are now going to have a height of 0. If you inspect your #navbar with chrome dev tools you can see that it is 31px tall ,in my window at least, it may be different in your window since you coded it to have a padding in vw wich if you ask me is not a very good practice so you may want to rethink that and give it a padding in px , em , or rem so an easy fix would be to just give the parent div, either <header> or <nav> a height of 31px or whatever your navbars height is so when you take the navbar out of the page flow you won't lose the navs height when its gone so something like the following:
header{
height:31px;
}
Here it is in a snippet:
window.onscroll = () => { myFunction() }; const navbar = document.getElementById("navbar"); const sticky = navbar.offsetTop; myFunction = () => { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } }
body { padding: 0px; margin: 0px; } header{ height:31px; } #navbar { overflow: hidden; background-color: #000; } #navbar a { float: right; display: block; text-align: center; padding: 1vw; text-decoration: none; font-family: 'Muli', sans-serif; font-size: 2.5vw; font-weight: 400; font-style: italic; } .color-nav a { color: white; } .active { background-color: #fff; color: black !important; } .sticky { position: fixed; top: 0; width: 100%; } section{ height:100vh; border:5px solid green; }
<header> <nav> <div class='color-nav' id="navbar"> <a id='contact-link' href="#contact">Contact</a> <a id="about-link" href="#about">About</a> <a id='portfolio-link' href="#portfolio">Portfolio</a> <a id='home-link' class="active" href="#home">Home</a> </div> </nav> </header> <section> <div id='home-1' class="home main-section"> </div> </section> <section> <div id="portfolio-1" class="portfolio main-section"> </div> </section> <section> <div id="about-1" class='about main-section'> </div> </section> <section> <div id='contact-1' class='contact main-section'> </div> </section>
But if if you are just going to have your navbar at the top of the page anyway there is no reason to have any of this javascript you can just add padding to the top of the body and give the navbar a position of fixed. There is no reason to have any of these scroll events at all. Adding the javascript scroll events like these are for if you have something above your navbar and you want it to fix after scrolling down the page a ways. Here is a snippet of that:
body { padding: 0px; padding-top:31px; margin: 0px; } nav{ position:fixed; top:0; width:100%; } #navbar { overflow: hidden; background-color: #000; } #navbar a { float: right; display: block; text-align: center; padding: 1vw; text-decoration: none; font-family: 'Muli', sans-serif; font-size: 2.5vw; font-weight: 400; font-style: italic; } .color-nav a { color: white; } .active { background-color: #fff; color: black !important; } section{ height:100vh; border:5px solid green; }
<nav> <div class='color-nav' id="navbar"> <a id='contact-link' href="#contact">Contact</a> <a id="about-link" href="#about">About</a> <a id='portfolio-link' href="#portfolio">Portfolio</a> <a id='home-link' class="active" href="#home">Home</a> </div> </nav> <section> <div id='home-1' class="home main-section"> </div> </section> <section> <div id="portfolio-1" class="portfolio main-section"> </div> </section> <section> <div id="about-1" class='about main-section'> </div> </section> <section> <div id='contact-1' class='contact main-section'> </div> </section>
solution2
0 2018-11-26 05:41:18
position: fixed;
doesn't leaves gap so the space it has cover will be taken by the other elements because of relative behaviour. You need to push the content with margin or padding with same size of the navigation height.
solution3
0 2018-11-26 06:38:43
我需要将window.pageYOffset >= sticky更改为window.pageYOffset > sticky因为在滚动到顶部时并未删除该类。
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.