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:

  1. you don't have set "position: relative" each scroll event received, set once in stylesheet
  2. 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

Popular posts from this blog

html5 - What is breaking my page when printing? -

-
Image
i have questioner , don't know why when printing it's creating break before first question. live demo (link) i able resolve issue removing fieldset container had wrapped in.. having fieldset element causing of fields grouped together, , since not fit on first page, being pushed second page. removing fieldset element, able firefox print first 2 questions on page 1 identically chrome. it seems not new problem firefox , fieldset not playing nice found old bugzilla ticket 2008 has persisted , still being commented on in 2014 (link) if retaining fieldset important, found solution else came here (link) <script type='text/javascript'> $(window).bind('beforeprint', function(){ $('fieldset').each( function(item) { $(this).replacewith($('<div class="fieldset">' + this.innerhtml + '</div>')); } ) }); $(window).bind(
Read more

c# - must be a non-abstract type with a public parameterless constructor in redis -

-
when save object, got below error must non-abstract type public parameterless constructor in order use parameter 't' in generic type or method 'servicestack.redis.redisclient.store<t>(t) redisclass.getinstnace().store(msg); // error here redisclass.getinstnace().save(); as third party's class, can not edit how save object? could create wrapper around third party object call constructor, store wrapper? e.g. public class mywrapper { public thirdpartyobject thirdpartyinstance { get; set; } public mywrapper() { thirdpartyinstance = new thirdpartyobject("constructors"); } }
Read more

ajax - PHP/JSON Login script (Twitter style) not setting sessions -

-
i'm having trouble getting twitter style login work properly, reason gets stuck at session_register("useremail"); session_register("userpass"); and doesn't redirect after it. if enter wrong account data, works , appropriate error message pops up. this full code: <?php if(empty($_post['email']) || empty($_post['password'])) { die(msg(0,"all fields required")); } if(!(preg_match("/^[\.a-z0-9_\-\+]+[@][a-z0-9_\-]+([.][a-z0-9_\-]+)+[a-z]{1,4}$/", $_post['email']))) die(msg(0,"you haven't provided valid e-mail")); $host="localhost"; $username="root"; $password="x"; $db_name="x"; $tbl_name="x"; mysql_connect("$host", "$username", "$password")or die("cannot connect"); mysql_select_db("$db_name")or die("cannot select db"); $useremail=$_post['email']; $userpass=
Read more