持久性页眉

这是一些代码，用于使某些内容区域的页眉在您滚动浏览这些内容时始终显示在屏幕顶部。然后，当您滚动到相关部分之外时，它就会消失。

在我们开始之前，需要了解一些事项

1. 有 很多 类似 它，但这是我的。
2. 此方法目前在移动设备上不起作用（至少我在查看的移动 Safari 上不起作用）。因为我对移动设备上的 JavaScript 和如何检测滚动事件、滚动位置等并不熟悉。

HTML

为了演示目的，我们将使用类名“persist-area”来标识要应用持久性页眉的区域，并将包含在其中的要持久显示的页眉缩进为“persist-header”。这些都是完全 无意义的类名，但在您自己的实现中，您可以通过了解自己的标记并应用适当的选择器来修复它。

<article class="persist-area">
   <h1 class="persist-header">
   <!-- stuff and stuff -->
</article>

jQuery JavaScript

这是我们要执行的操作的简单描述

1. 遍历每个持久性区域并克隆页眉。克隆的页眉将保持隐藏状态，直到我们需要它。
2. 每当窗口滚动时，我们都会运行一些测试。
3. 如果我们滚动到应该具有持久性页眉的区域，但页眉是隐藏的，我们将以固定位置显示克隆的页眉。所有其他持久性页眉将被隐藏。

完整工具包

function UpdateTableHeaders() {
   $(".persist-area").each(function() {
   
       var el             = $(this),
           offset         = el.offset(),
           scrollTop      = $(window).scrollTop(),
           floatingHeader = $(".floatingHeader", this)
       
       if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
           floatingHeader.css({
            "visibility": "visible"
           });
       } else {
           floatingHeader.css({
            "visibility": "hidden"
           });      
       };
   });
}

// DOM Ready      
$(function() {

   var clonedHeaderRow;

   $(".persist-area").each(function() {
       clonedHeaderRow = $(".persist-header", this);
       clonedHeaderRow
         .before(clonedHeaderRow.clone())
         .css("width", clonedHeaderRow.width())
         .addClass("floatingHeader");
         
   });
   
   $(window)
    .scroll(UpdateTableHeaders)
    .trigger("scroll");
   
});

CSS

我们使用 JavaScript 直接更改的唯一 CSS 是持久性页眉的可见性。我觉得这很可以接受。所有其他样式理所当然地是类的一部分。非常简单，我们只需要

.floatingHeader {
  position: fixed;
  top: 0;
  visibility: hidden;
}

因此…

随意使用。

查看演示   下载文件