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

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -