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

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

粘滞/固定标题不适用于滚动

1 个答案: