jquery - Scroll to top of element when near top of window -
i trying achieve following:
i have div, when it's @ top of page want automatically scroll top of div.
here script have far. can see (i hope). when #plus between 250 , 20 px top of page, want run animation positions #editions @ top of page. however, animation executed many times, , keeps on going. think it's being triggered every value in range between 250 , 20, 230 times. i'm not sure if i'm going right way.
// scroll editions // function scrolleditions(){ $('html, body').animate({ scrolltop: $("#plus").offset().top }, 1200, 'easeoutquint').delay(200).animate({ scrolltop: $("#editions").offset(). }, 800, 'easeoutquint'); }; // scrolling check // function showhidetitles(){ // distance of elements frop top // var ptop2 = math.round($('#plus').offset().top - $(window).scrolltop()); // plus top // auto scrolling // if (ptop2 <= 240 && ptop2 >= 20){ scrolleditions(); } }; $(window).scroll(function(){ showhidetitles() });
if rolling own implementation want use debounce function trigger action once within given interval.
http://underscorejs.org/#debounce
http://jsfiddle.net/puleos/j67eg/40/
var fn = _.debounce(showhidetitles, 300); $(window).scroll(fn);
if want jquery library handle scroll events waypoints pretty good.
http://imakewebthings.com/jquery-waypoints/