粘性/固定标题在滚动时不起作用

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 值是#top-nav-wrapper 的高度，加上它有一个box-shadow。

应该保留带有搜索栏的 .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>

有些人建议 #top-nav-wrapper 上的 z-index 更高，但这与它无关，也只是隐藏了问题 - 加上标题上有不透明度，所以它显示在下面。

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

任何想法表示赞赏。

Answer 1

我怀疑问题可能是每次滚动（甚至一点点）时都会调用脚本，因此会导致页面重新呈现。也就是说 - 当您滚动时，该事件会被触发很多次，这会混淆页面。

如果您允许滚动事件调用另一个函数，该函数会计算自上次调用以来的时间长度，并退出，除非有时间延迟，否则您可能会获得更平滑的效果。

我之前也遇到过这种情况，但没有使用 jquery。像这样的东西......

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 .. 
    .
    .
    .
}

我想你可以把它全部放在一个函数中。