粘滞/固定头将无法正常工作onscroll

Question

我有一个sticky header下面的代码，但滚动使得内容跳起来的页面，它是不是一个平滑的过渡。当下面的固定标题被激活时，＃top-nav-wrapper几乎不会滚动。

顶级导航栏应自然滚动并且搜索栏应保留。

2个脚本产生相同的结果，如同克隆：

<script> 
$(document).scroll(function() { 
    var value = $(this).scrollTop(); 
    if (value > 48) { 
     $(".header").css("position", "fixed"); 
     $("body").css("padding-top", "90px"); 
    } else { 
     $(".header").css("position", "relative"); 
     $("body").css("padding-top", "0"); 
    } 
}); 
</script> 

<script> 
$(document).ready(function() { 
    var height = $('.header').outerHeight(); 
    $(window).scroll(function() { 
      if($(this).scrollTop() >= height) 
      { 
       $('.header').css('position','fixed'); 
       $('body').css('padding-top',height+'px'); 
      } 
      else if($(this).scrollTop() <= height) 
      { 
       $('.header').css('position','static'); 
       $('body').css('padding-top','0'); 
      } 
    }); 
    $(window).scroll(); 
}); 
</script> 

48值是＃顶NAV-包装物的高度，再加上它具有箱阴影。

与搜索栏.header类是什么应该保持。

基本HTML：

<div class="headerWrapper"> 
    <div id="top-nav-wrapper"></div> 
     <div class="header"></div> 
</div> 

的CSS：

body { 
    background: #EEE; 
} 

#top-nav-wrapper { 
    width: 100%; 
    position: relative; 
    box-shadow: 0px 1px 1px 0px #B8B8B8; 
    z-index: 2001; 
    background: #EEE; 
} 

.header { 
    position: relative; 
    left: 0; 
    top: 0; 
    width: 100%; 
    min-height: 90px; 
    z-index: 2000; 
    background: #EEE; 
    height: 90px; 
    box-shadow: 0px 1px 2px #C4C4C4; 
} 

我尝试了以下的建议，但它是相同的效果之前：有些人认为

<script> 
     $(window).scroll(function() { 
      var value = $(this).scrollTop(); 
      var $body = $('body'); 
      var docked = $body.hasClass('docked');  

      if (value > 48) { 
       if(!docked) { 
        $body.addClass('docked'); 
       } 
      } else { 
       if(docked) { 
        $body.removeClass('docked'); 
       } 
      } 
     }); 
     </script> 

的z-index在＃top-nav-wrapper上更高，但这与它无关，也隐藏了问题 - 再加上t这是标题上的不透明度，所以它显示在下面。

我需要一个真正的解决方案来解决这个问题应该如此简单;不是掩饰。

任何想法赞赏。

Answer 1

我怀疑问题可能是脚本被称为每次滚动的时间（哪怕是一点点），所以它导致页面重新呈现。那就是 - 在你滚动的时候，这个事件会被激发很多次，这会让页面变得混乱。

你可能，如果你允许滚动事件调用另一个函数，它的工作原理了多久是自上一次它被称为，并退出，除非出现了一个时间差获得更流畅的效果。

我有过这样的情况我自己过，但是没有用jQuery。 somethign像这样...

var lastTime=0; // hasn't been called yet - note it's a global variable 
$(document).scroll(function() { 
    myOnScroll(); 
} 
); 


function myOnScroll() { 
    var nowTime= new Date().getTime(); // current time 
    var cutoffTime= .03; [you decide a number of milliseconds ? maybe about 3 times a second ? probably a xcase of trying values to see what works best]; 
    if (nowTime-lastTime < cutoffTime) { return;} // quit if it's too early 
    lastTime=nowTime; // make a note of the last time we did this 
    // do the scrolling stuff here .. 
    . 
    . 
    . 
} 

我想你可以把它们都放在一个功能虽然。