How to get scrollTop position realtime without jQuery?

user_12435045 0
Viewed 189

I want to make make my navbar looks better with css effects. I have this as style classes:

.bg-a1{
   background-color: #23e896;
   color: white;
}
.bg-a2{
   background-color: #1cb374;
   color: white;
   animation: all 0.3 ease-in-out;
}
.pad-nav-a{
   padding: 30px;
}
.pad-nav-b{
   padding: 20px;
   animation: all 0.3 ease-in-out;
}

now, i wanna add class pad-nav-b and bg-a2 when scrollTop > 10. I usually use jQuery:

$(document).ready(function () {

   $(window).scroll(function () {
      var scrollTop = $(window).scrollTop();

      if (scrollTop >= 10) {
         $('#navbar').addClass('pad-nav-b bg-a2');
         $('#navbar').removeClass('pad-nav-a bg-a1');
      } else {
         $('#navbar').removeClass('pad-nav-b bg-a2');
         $('#navbar').addClass('pad-nav-a bg-a1');
      }

   });
});

But now, I wanna make with native javaScript only. How to track the scrollTop in realtime like jQuery?

javascript
2 Answers

You can event listen scroll: 

const navbar = document.getElementById("navbar");
window.addEventListener("scroll", function(event) {
    var top  = window.pageYOffset || document.documentElement.scrollTop,
    left = window.pageXOffset || document.documentElement.scrollLeft;
    console.log(top,left);
    if (top >= 10) {
        console.log('applying...........')
        navbar.classList.add('pad-nav-b', 'bg-a2');
        navbar.classList.remove('pad-nav-a', 'bg-a1');
    } 
    else {
        console.log('removing...........')
        navbar.classList.remove('pad-nav-b', 'bg-a2');
        navbar.classList.add('pad-nav-a', 'bg-a1');
    }
}, false);
<html>
    <head>
       <style>
        .bg-a1{
            background-color: #23e896;
            color: white;
        }
        .bg-a2{
            background-color: #1cb374;
            color: white;
            animation: all 0.3 ease-in-out;
        }
        .pad-nav-a{
            padding: 30px;
        }
        .pad-nav-b{
            padding: 20px;
            animation: all 0.3 ease-in-out;
        }
        body {
            background-color: lightblue;
            height:3000px;
        }
        </style>
    </head>
    <body>
        <div id="navbar">nav bar</div>
    </body>
<html>

You can see it actually works ..

user_102795280

You can add a scroll event listener to window and then add/remove class from navbar element like:

const navbar = document.getElementById("navbar");
window.addEventListener('scroll', function(e) {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if (scrollTop >= 10) {
    navbar.classList.add('pad-nav-b', 'bg-a2');
    navbar.classList.remove('pad-nav-a', 'bg-a1');
  } else {
    navbar.classList.remove('pad-nav-b', 'bg-a2');
    navbar.classList.add('pad-nav-a', 'bg-a1');
  }
});
user_18238410
Related