更改滾動時的邊框顏色

Question

我想在向下滾動時更改導航欄的底部邊框顏色並在向上滾動時更改。 應該是平穩過渡。 作為參考，您可以查看 Facebook 信使導航欄邊框顏色（ https://www.messenger.com/ ）。 我不想使用任何插件（滾動觸發器等）。 它應該是純 java 腳本和 CSS 從頭開始。

我的導航欄 CSS 代碼

.nav {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 100px;
border-bottom: 1px solid #EAEAEA;
background-color: white;
}

HTML 代碼

<div class="nav">
</div>

Answer 1

試試這個，它是純 javascript 只需使用 JS 添加一個 class，作為添加和刪除 class 工作。

 //use window.scrollY var scrollpos = window.scrollY; var header = document.getElementsByClassName("nav")[0]; function add_class_on_scroll() { header.classList.add("nav-border"); } function remove_class_on_scroll() { header.classList.remove("nav-border"); } window.addEventListener('scroll', function(){ //Here you forgot to update the value scrollpos = window.scrollY; if(scrollpos > 100){ add_class_on_scroll(); } else { remove_class_on_scroll(); } console.log(scrollpos); });

 .nav-border{ border-bottom-color: red; transition: all 300ms linear; }