How to add animation to the active div on window scroll?

user_2067148 0
Viewed 157

I have multiple divs in my page. This div contains size and color. When scroll down, div visible to the screen should move up and when scroll up, it should return to its original position.

This is the code so far I have tried. With this code, when I scroll down, div is moving up but when I scroll up , div is not coming down. Can anybody please help me?

function isElementInViewport(el) {
  if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
  }
  var rect = el.getBoundingClientRect();
  return (
    (rect.top <= 0 &&
      rect.bottom >= 0) ||
    (rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.top <= (window.innerHeight || document.documentElement.clientHeight)) ||
    (rect.top >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))
  );
}

window.addEventListener('scroll', function(e) {

  winScrollTop = $(this).scrollTop();

  var elementsToShow = document.querySelectorAll('.rectangle');
  Array.prototype.forEach.call(elementsToShow, function(element) {
    if (isElementInViewport(element)) {
      element.classList.add('is-visible');
    } else {
      element.classList.remove('is-visible');
    }
  });
});
.rectangle {
  background-color: red;
  height: 444px;
  width: 100px;
  /* margin-top: -98px; */
  z-index: -30;
  transition: 0.5s;
  transform: translateY(-98px);
  margin-bottom: 25px;
}

.is-visible {
  transform: translateY(-250px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>

css jquery javascript
1 Answers

So what i did over here is that firstly i checked the scroll event and then decided if the scroll was actually upwards or downwards. Once i identified whether i was scrolling upwards or downwards, i added the classes respectively. For the not-visible class i am setting style transform: translateY(0px) which simply returns the element to its default place.

.not-visible{
  transform: translateY(0px);
}


var lastScrollTop= 0;
window.addEventListener('scroll', function(e) {
  winScrollTop = $(this).scrollTop();

  var st = window.pageYOffset || document.documentElement.scrollTop; // Credits:
  var elementsToShow = document.querySelectorAll('.rectangle');
     if (st > lastScrollTop){ // If st is greater than lastscrollTop then it is downward
      console.log("down");

       // then check if elemetnts are in view
       Array.prototype.forEach.call(elementsToShow, function(element) { 
            if (isElementInViewport(element)) {

              element.classList.remove('not-visible'); // remove class notvisible if any
              element.classList.add('is-visible'); // Add class isvisible 
            }
               lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling

       });
    } else {
      console.log("up");

       Array.prototype.forEach.call(elementsToShow, function(element) { 
           if (isElementInViewport(element)) {
              // Remove class isvisible and add class not visible to move the element to default place
              element.classList.remove('is-visible'); 
              element.classList.add('not-visible');
           }
              lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling

       });

    }


});
user_101782780
Related