Having Issue on Snapping Divs to the Top of Page On Scroll

Having Issue on Snapping Divs to the Top of Page On Scroll


I am trying to snap each div  .item  to the top of page on scroll when the top of the div reaches in an specific portion of page. right now this is working on div one but stuck there


$(document).ready(function() { var windowHeight = $(window).height(), gridTop = windowHeight * .3, gridBottom = windowHeight * .6; $(window).on('scroll', function() { $('.item').each(function() { var thisTop = $(this).offset().top - $(window).scrollTop(); if ((thisTop >= gridTop) && (thisTop <= gridBottom)) { console.log($(this).data('page')); $('html, body').animate({ scrollTop: $(this).offset().top }, 700); } }); }); });