javascript - Animate position of div on scroll position -
javascript - Animate position of div on scroll position -
what's best way animate position of div on scroll position? essentially, when reach point on page... fixed element animate up.
i have included below have... it's little slow , seems slide up... slowly... half way... complete. thoughts?
var shareheight = $('.related-share-container').height(); $('.related-share-container').css('bottom',-shareheight); $(window).scroll(function() { if ($(window).scrolltop() + $(window).height() > $(document).height() - 150) { $('.related-share-container').stop().animate({ bottom: 0 }, 500); } else { $('.related-share-container').stop().animate({ bottom: -shareheight }, 500); } });
update reward
this dev site working on: http://goo.gl/kcfde6 , can see, if scroll bottom , stop, slides well, but, if maintain scrolling... it's interacting animation , can jumpy/slow transition. ideas?
it happening cause each scroll motion previous animation stopped , new begins, slower previous 1 cause has less distance animate. need flag in code prevent same animation triggering 1 time again , again.
modified js:
here using done
class flag.
var shareheight = $('.related-share-container').height(); $('.related-share-container').css('bottom',-shareheight); $(window).scroll(function() { if ($(window).scrolltop() + $(window).height() > $(document).height() - 150) { if(!$('.related-share-container').hasclass('done')) $('.related-share-container').addclass('done').stop().animate({ bottom: 0 }, 500); } else { if($('.related-share-container').hasclass('done')) $('.related-share-container').removeclass('done').stop().animate({ bottom: -shareheight }, 500); } });
javascript jquery html css animation
Comments
Post a Comment