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的高度，加上它有一个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>

任何想法都赞赏。

更新 - 我已将脚本更改为以下内容并将其置于头部 - 这会导致顶部导航无法动态滚动，我在标题之后和之前添加了一个占位符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;
}

如果有一个可以定位的整体容器而不是正文，则可以提高效率。

使一个粘性标题工作

1 个答案: