html - 创建一个在离开 View 后变得固定的标题？

Question

当标准 header 离开“可查看区域”时，将标准 header 转换为固定 header 的最佳方法是什么？

似乎找不到一个很好的例子，但实际情况是:

• 向下滚动
• 标题过渡到固定的全宽。

Answer 1

如果可查看区域的顶部大于 412 像素，此代码将添加一个 fixed 类。调整它以匹配页眉顶部的位置。

   $(document).ready(function(){
       $(window).bind('scroll', function() {
       var navHeight = 412;
             if ($(window).scrollTop() > navHeight) {
                 $('.header').addClass('fixed');
             }
             else {
                 $('.header').removeClass('fixed');
             }
        });
    });

CSS

.fixed {
    width: 100%;
    position: fixed; 
    z-index: 1;
    top:0
}

z-index 所以它会浮在其他固定元素上，如果你有其他元素有 z-index，你可能需要增加整数。显然 top 只是表示它固定在顶部。