Animate Left Not Working On Page Scroll

I have two div's in pink and sky blue color, I make them the same height and width. Pink div is almost covering the height of my screen, when I scroll down and scrollbar reaches t

Solution 1:

You can apply this logic:

1. Use transition to animate the element, for that some css like this:

   #blueDiv {
     width: 50%;
     height: 100px;
     background-color: blue;
     position: absolute;
     left:0;
     transition:left 2s linear;
   }
   #blueDiv.right {
     left:50%
   }
   

2. With Jquery check how far is the element sky from the top and trigger the event if the scroll reach that:

   $(window).scroll(function() {
       var offT = $('#two').offset().top - $(window).height(),
           scrT = $(window).scrollTop();
       if(scrT >= offT) {
          $('#blueDiv').addClass('right')
       } else {
          $('#blueDiv').removeClass('right')
       }
   });
   

---

Jquery Demo