Javascript 如何使一个元素假位置：固定，所以它的行为固定，直到一定的滚动高度，然后附加？

许多网站都有一个功能，当你滚动到某个点（比如侧边栏的末端）时，页面上的一个元素会固定显示，然后它会锚定到侧边栏的底部。一旦你向上滚动，它开始像一个固定的元素一样，在你滚动时留在屏幕上

---

您将其称为什么？它是如何实现的？

您可以将位置设置为绝对，并将附加的滚动事件设置到页面，在这种情况下，您可以根据滚动条的位置更改顶部css值（在jQuery中，它是纯javascript中的滚动顶部，应该类似），然后您添加了一个条件，即只有当scrollTop小于边栏的特定值（如offset.top+height）时，top才会更改。

您可以使用，但我知道这并不完全是您想要的，滚动和进入视图的div之间存在延迟，它必须不断地进行追赶

代码的根是，因此这是一个很好的起点。据我所知，这种效果还没有一个正式的名字，但我看到它描述了很多地方，现在有人想知道它，我找不到它

编辑以下是我想要的：

Chris Coyier技术的基础是html：

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

和jQuery：

 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");

});   

函数UpdateTableHeaders（）{
$（“.persist area”）.each（函数（）{
var el=$（此），
偏移量=标高偏移量（），
scrollTop=$（窗口）.scrollTop（），
floatingHeader=$（“.floatingHeader”，this）
如果（（scrollTop>offset.top）&&（scrollTop

收听滚动事件，当滚动经过要保留在视图中的元素时，您将该元素的位置更改为“固定”

我创建了一个JSFIDLE来说明这一点：

有几件事需要记住，例如，一个固定的元素将相对于窗口放置，或者第一个父元素的位置为

位置：relative

其次，当您将一个元素更改为“固定”时，它会压缩它原来所在的空间，从而导致它下面的内容向上移动。如果你想让效果看起来平滑，你必须在它的位置放一些东西，它占用的空间和它一样大

在我的JSFIDLE示例中，我通过将header元素包装到另一个元素中，然后将其高度设置为匹配（编程方式）来实现这一点。不过，有几种不同的方法可以实现这一点

我还将包括下面的代码，在我使用jQuery的示例中

JavaScript:

var $header = $("#header");
var HeaderOffset = $header.position().top;
$("#headerContainer").css({ height: $header.height() });

$("#container").scroll(function() {
    if($(this).scrollTop() > HeaderOffset) {
        $header.addClass("fixedTop");
    } else {
        $header.removeClass("fixedTop");
    }
});

CSS:

示例HTML：

<h1>Fixed Position Header - after a point</h1>
<div id="containerParent">
    <div id="container">
        This text is an example of content that might occur before the header.
        <div id="headerContainer">
            <div id="header">Header</div>
        </div>
        <div>
            Below is enough content to trigger scrolling.
            line 1 <br/>
            line 2 <br/>
            line 3 <br/>
            line 4 <br/>
            line 5 <br/>
            line 6 <br/>
            line 7 <br/>
            line 8 <br/>
            line 9 <br/>
            line 10 <br/>
            line 11 <br/>
            line 12 <br/>
            line 13 <br/>
            line 14 <br/>
            line 15 <br/>
        </div>
    </div>
</div>

固定位置收割台-在一个点之后
此文本是标题之前可能出现的内容的示例。
标题
以下内容足以触发滚动。
第1行

第2行

第3行

第4行

第5行

第6行

第7行

第8行

第9行

第10行

第11行

第12行

第13行

第14行

第15行

与javascript相比，我认为这是正确的方法。您还应该阅读John Resig（jQuery作者）关于滚动事件和性能的这篇文章。事实上，我发现大多数浏览器，即使是像Chrome这样为速度而优化的现代浏览器，如果使用“位置：固定”或“滚动”技巧，也会慢到爬行速度。正如您所提到的，这正是你不应该使用这种技术的原因。

#containerParent {
    position: relative;
    width: 180px;
}

#container {
    height:200px;
    overflow:auto;
}

#header {
    background:black;
    color:white;
    width: 100%;
}

.fixedTop {
    position: absolute;
    top: 0;
}

<h1>Fixed Position Header - after a point</h1>
<div id="containerParent">
    <div id="container">
        This text is an example of content that might occur before the header.
        <div id="headerContainer">
            <div id="header">Header</div>
        </div>
        <div>
            Below is enough content to trigger scrolling.
            line 1 <br/>
            line 2 <br/>
            line 3 <br/>
            line 4 <br/>
            line 5 <br/>
            line 6 <br/>
            line 7 <br/>
            line 8 <br/>
            line 9 <br/>
            line 10 <br/>
            line 11 <br/>
            line 12 <br/>
            line 13 <br/>
            line 14 <br/>
            line 15 <br/>
        </div>
    </div>
</div>