制作粘性标题

Question

我得到了sticky header 的以下代码，但我无法让滚动条正常工作，而且过渡也不是很顺畅。当下面的固定标题被激活时，#top-nav-wrapper 几乎不会滚动：

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

48 值是#top-nav-wrapper 的高度，加上它有一个盒子阴影。

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

任何想法表示赞赏。

更新 - 我已将脚本更改为以下内容并将其放在头部 - 这解决了顶部导航不动态滚动的问题，我在标题之后和内容之前添加了一个占位符 div与固定标题相同的大小高度以将内容保持在应有的位置（因为固定标题会改变自然流），但是当固定标题启动时仍然存在滞后/跳跃。

占位符 CSS：

.headerPlaceholder {
height: 90px;
width: 100%;
display: none;
}

设置 48px 滚动高度后顶部导航不一直滚动的解决方案：

<script>
    $(document).ready(function () {
        var div = $('.header');
        var div2 = $('.headerPlaceholder');
        var start = $(div).offset().top;

        $.event.add(window, "scroll", function () {
            var p = $(window).scrollTop();
            $(div).css('position', ((p) > start) ? 'fixed' : 'static');
            $(div).css('top', ((p) > start) ? '0px' : '');
            $(div2).css('display', ((p) > start) ? 'block' : 'none');
        });

    });
</script>

为了使其平稳过渡，可能需要稍微延迟和淡入/淡出效果，如果有人可以提供帮助吗？

Answer 1

你可以试试

$(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');
        }
    }
});

CSS

.docked {
    padding-top: 90px;
}
.docked .header {
    position: fixed;
    z-index: 2005;
}

如果有一个可以定位的整体容器而不是主体，则效率会更高。