如何使一个元素假位置:固定，使其行为固定，直到某个滚动高度，然后附加

How to make an element fake position:fixed so it acts fixed until a certain scroll height, then attaches?

本文关键字：高度 然后 滚动 位置 元素 何使一 固定      更新时间：2023-09-26

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

你怎么称呼它？它是怎么做到的？

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

您可以使用https://github.com/wduffy/jScroll但我知道这并不是你想要的，滚动和进入视图之间有一段延迟，它必须不断地追赶。

代码的根是jQuery的.scroll()处理程序，因此这是一个很好的起点。据我所知，这种效果还没有正式的名字，但我已经在很多地方看到过它的描述，现在有人想知道它，我根本找不到！

EDIT以下是我想要的：CSS技巧上的持久头

Chris Coyier技术的基础是html:

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

css：

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

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

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

我创建了一个jsFiddle来说明这一点：http://jsfiddle.net/luisperezphd/EcsS6/

有几件事需要记住，例如，固定元素将相对于窗口或具有position: relative的第一个父元素放置。

其次，当您将一个元素更改为fixed时，它会塌陷它以前所在的空间，导致它下面的内容上移。如果你想让效果看起来流畅，你必须在它的位置放一些东西，它占用的空间与它相同。

在我的jsFiddle示例中，我通过将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：

#containerParent {
    position: relative;
    width: 180px;
}
#container {
    height:200px;
    overflow:auto;
}
#header {
    background:black;
    color:white;
    width: 100%;
}
.fixedTop {
    position: absolute;
    top: 0;
}

示例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>
相关文章：