[英]Sticky navbar hides content when scrolling to top
我有一個導航條。 頁面加載后，第一個home div會正確顯示。 但是，向下滾動然后再向上備份之后， home div中的某些內容將被頂部的導航欄隱藏。 如何解決此問題？ 任何建議表示贊賞！
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>
問題是，滾動時#navbar固定位置添加到#navbar以便將其從頁面流中移出並將其固定至屏幕。 為此，您將其從<nav>和<header>取出，這些元素的高度現在為0。如果您使用chrome dev工具檢查#navbar ，則可以看到它的高度為31px，至少在我的窗口中，它可能在您的窗口中有所不同，因為如果您問我不是很好的做法，那么您將其編碼為在vw有填充，因此您可能需要重新考慮一下並在px填充， em或rem所以一個簡單的解決方法就是給父div（ <header>或<nav>的高度設置為31px或<nav>欄的高度，這樣當您將導航欄從頁面流中移出時，就不會丟失導航高度消失后，如下所示：
header{
height:31px;
}
這是一個摘要：
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>
但是，如果您將導航欄放置在頁面頂部，則沒有任何理由使用此javascript，您可以在主體頂部添加填充並為導航欄設置固定位置。 根本沒有任何這些滾動事件。 如果您的導航欄上方有某些內容，並且希望以某種方式向下滾動頁面后進行修復，則可以添加類似此類的javascript滾動事件。 這是一個片段：
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>
position: fixed;
不會留下間隙，因此由於相對的行為，其他元素將占用它所覆蓋的空間。 您需要以與導航高度相同的大小以邊距或填充來推送內容。
我需要將window.pageYOffset >= sticky更改為window.pageYOffset > sticky因為在滾動到頂部時並未刪除該類。
在沒有 jquery 的情況下滾動時更改導航欄內容（Header Sticky on Scroll）？
[英]Change the navbar content when scrolling without jquery (Header Sticky on Scroll)?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.