CODEWITHSUNDEEP
javascriptjquery
mohammad
mohammad

Reputation: 409

Handle on scroll up and scroll down Jquery

I Use the following code to change my element border radius on scroll down:

var scrollT = 0;

$(window).scroll(function (event) {
    var st = $(this).scrollTop();
    var val = (document.getElementById("bx").style.borderRadius).replace("%", "");
    if (st > scrollT ) {
        if (val <= 50) {
            val -= 1;
            val += "%";
            document.getElementById("bx").style.borderRadius = val;
        }
    }

    scrollT = st;     
});

How I can handle scroll top for change element border radius to 50%?

Upvotes: 0

Views: 62

Answers (1)

Atul Rajput
Atul Rajput

Reputation: 4178

This is kind of a trick you can use, you just have to check the current scrollTop position vs the previous scrollTop

Once you got that either you are scrolling up or down, you can do whatever you want accordingly.

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       $("#atul").text("scrolling Down now");
   } else {
      $("#atul").text("scrolling Up now");
   }
   lastScrollTop = st;
});
body{height: 1500px;}

#atul {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="atul">Just Scroll to check</p>

Upvotes: 1

Related Questions