粘性导航栏在滚动到顶部时会隐藏内容
[英]Sticky navbar hides content when scrolling to top
问题描述
I have a sticky navbar. 
我有一个导航条。 When the page loads, the first home div displays properly. 页面加载后，第一个home div会正确显示。 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. 但是，向下滚动然后再向上备份之后， home div中的某些内容将被顶部的导航栏隐藏。 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 个解决方案
解决方案1
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. 问题是，滚动时#navbar固定位置添加到#navbar以便将其从页面流中移出并将其固定至屏幕。 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: 为此，您将其从<nav>和<header>取出，这些元素的高度现在为0。如果您使用chrome dev工具检查#navbar ，则可以看到它的高度为31px，至少在我的窗口中，它可能在您的窗口中有所不同，因为如果您问我不是很好的做法，那么您将其编码为在vw有填充，因此您可能需要重新考虑一下并在px填充， em或rem所以一个简单的解决方法就是给父div（ <header>或<nav>的高度设置为31px或<nav>栏的高度，这样当您将导航栏从页面流中移出时，就不会丢失导航高度消失后，如下所示：
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. 但是，如果您将导航栏放置在页面顶部，则没有任何理由使用此javascript，您可以在主体顶部添加填充并为导航栏设置固定位置。 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. 如果您的导航栏上方有某些内容，并且希望以某种方式向下滚动页面后进行修复，则可以添加类似此类的javascript滚动事件。 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>
解决方案2
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. 您需要以与导航高度相同的大小以边距或填充来推送内容。
解决方案3
0 2018-11-26 06:38:43
我需要将window.pageYOffset >= sticky更改为window.pageYOffset > sticky因为在滚动到顶部时并未删除该类。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.