色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

classList和window.onscroll問題

榮姿康2年前9瀏覽0評論

我正在學習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;
}