jquery - How to make content scroll smoothly in fixed div with page scroll -
i trying create fixed top nav has menu change scroll down page. when scroll past y-point menu scroll scroll down page show second menu become sticky. have implemented rough version here: http://jsfiddle.net/hsplq/
i have 2 main issues
1) content not scroll smoothly. if scroll notice content not move smoothly.
2) not sure best way implement type of animation/effect. code rough, wondering if there better/more optimal way accomplish this.
thanks
here code rough prototype (same jsfiddle link)
<html lang="en"> <head> <style type="text/css"> body{ height: 2000px; } .container { position: fixed; top: 0px; left: 0px; width: 100%; background-color: #ccc; height: 80px; overflow: hidden; } .content1, .content2 { height: 40px; margin: 40px; } </style> </head> <body> <div class="container"> <div class="content"> <div class="content1"> lots of text </div> <div class="content2"> more text </div> </div> </div> </body> <script src="js/jquery.min.js"></script> <script type="text/javascript"> $(window).scroll(function() { var scrollypos = $(document).scrolltop(); if (scrollypos > 200 && scrollypos < 300) { var y = 200-scrollypos; $(".content").css({'position': 'relative', 'top': y}); } }); </script> </html>
since cannot control users cpu, browser, browser version, graphics card, etc. there not can do. try use vanilla javascript instead of jquery improve performance bit, not going (it may not change depending of if render or script interpreter slow).
in browser, instance, example works quite smoothly.
depends on client how look, that's web. don't worry it.
finally there 2 things noticed:
- you don't have set "position: relative" each scroll event received, set once in stylesheet
- if 1 scrolls fast menu gets stuck in odd position
here code fix above issue although may not fix smoothnes problem:
$(window).scroll(function() { var scrollypos = $(document).scrolltop(); var y; if (scrollypos > 200 && scrollypos < 300) { y = 200 - scrollypos; } else if (scrollypos > 300) { y = -100; } else { y = 0; } console.log(y); $(".content").css({'top': y}); }); if want smooth out gaps between scrolling intervals bit, try this:
$(window).scroll(function() { var scrollypos = $(document).scrolltop(); var y; if (scrollypos > 200 && scrollypos < 300) { y = 200 - scrollypos; } else if (scrollypos > 300) { y = -100; } else { y = 0; } var position = parseint($(".content").css('top')); if((scrollypos < 300 && scrollypos > 200) || (position < 0 && position > -100)) { $(".content").stop().animate({'top': y}, 50); } }); 
Comments
Post a Comment