我正在學習html、css和js,我正在嘗試制作一個粘性的導航條,這樣當我向下滾動頁面時,導航條會粘在頂部。
起初,使用這段代碼是可行的:
html:
<div class="navBarContainer" id="navbar">
<a class="navBar" href="index.html">Home</a>
<a class="navBar" href="contacts.html">Contattaci</a>
<a class="navBar">La storia</a>
<a class="navBar" href="gallery.html">Gallery</a>
<a class="navBar">Eventi</a>
<select id="brancaDropdown" onchange = "onChange()">
<option value="lupetti" id="option" selected>Lupetti</option>
<option value="reparto" id="option">Reparto</option>
<option value="clan" id="option">Clan</option>
</select>
</div>
CSS:
.sticky {
position: fixed;
top: 0;
width: 100%;
}
js:
let navBar = document.getElementById("navbar");
let navBarOffset = navBar.offsetTop;
window.onscroll = stickScrollbar();
function stickScrollbar() {
if (window.pageYOffset >= navBarOffset) {
navBar.classList.add("sticky");
} else {
navBar.classList.remove("sticky");
}
}
然后,第二天,我發現它不再工作了。Window.onscroll沒有觸發(我讓函數調用了一個警報),所以我嘗試綁定& quotonscroll & quot到身體,它就火了,但我還是不知道為什么window.onscroll不好。不管怎樣,我認為問題已經解決了,但是classList.add()/remove()不起作用。我試著通過點擊一個按鈕來改變類,而不是滾動,同樣的結果。所以我嘗試了onload,使用了body元素,但是效果不太好。我用的是Chrome。 請幫幫忙,這快把我逼瘋了。
試試這個:
let navBar = document.getElementById("navbar");
let navBarOffset = navBar.offsetTop;
window.onscroll = function stickScrollbar(){
if (window.pageYOffset >= navBarOffset) {
navBar.classList.add("sticky");
} else {
navBar.classList.remove("sticky");
}
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.container{
background-color:red;
height: 150vh;
}
<div class="container">
<div class="navBarContainer" id="navbar">
<a class="navBar" href="index.html">Home</a>
<a class="navBar" href="contacts.html">Contattaci</a>
<a class="navBar">La storia</a>
<a class="navBar" href="gallery.html">Gallery</a>
<a class="navBar">Eventi</a>
<select id="brancaDropdown" onchange = "onChange()">
<option value="lupetti" id="option" selected>Lupetti</option>
<option value="reparto" id="option">Reparto</option>
<option value="clan" id="option">Clan</option>
</select>
</div>
</div>
好了,伙計們,謝謝大家,我解決了它,這只是一個previus變量錯誤聲明,導致了一個意外,但因為我正在使用visual studio代碼,我沒有得到通知。我聲明:const calendar = getElementById(& quot;日歷& quot)沒有寫& quot文檔。"。
根據你的問題 你需要把導航條放在頂部,不需要使用javascript
如果你想把導航條放在頂部,只需修改這個css:
.sticky {
position: sticky;
top: 0;
}