Question

我为sticky header获得了以下代码，但我无法使滚动顺利过渡。单个滚动后，固定标题会跳转。

基本的html：

<div class="headerWrapper">
    <div id="top-nav-wrapper"></div>
        <div class="header"></div>
</div>
   <div class="headerPlaceholder"></div>
        <div class="mainContent">
          *page content goes here*
         </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;
    }

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


body.fixed .header {
    position: fixed;
    top: 0;
}
body.fixed .headerPlaceholder {
    display: block;
}

脚本：

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

    $.event.add(window, "scroll", function () {
        var p = $(window).scrollTop();
        if( p > start ) {
            $('body').addClass('fixed');
        } else {
            $('body').removeClass('fixed');
        }
    });
});
</script>

为了使其平稳过渡，如果有人可以提供帮助或建议替代方案，可能需要稍微延迟和淡入/淡出效果。

This is the page to test

JS Fiddle

Answer 1

使用jQuery animate()方法实现更平滑的过渡。使用它，根据您的需要为div设置动画。

在onscroll事件之后修复了粘性标题跳转

1 个答案: