更改滚动时的边框颜色

Question

I want to change bottom border color of navigation bar on scroll down and change on scroll up. It should be smooth transition. For reference you can see Facebook messenger navigation bar border color ( https://www.messenger.com/ ). I don't want to use any plugins (scroll trigger etc). It should be in pure java script and CSS from scratch.

MY NAVBAR CSS CODE

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

HTML CODE

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

Answer 1

Try this, it's pure javascript just add a class using JS, work as add and remove 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; }