logo标签列表

如何使一个元素假的固定位置，以便它在特定滚动高度之前保持固定，并随后附加？

javascripthtmlcss
8
许多网站都有这样一个功能，当你滚动页面时，某个元素会固定在页面上直到你滚到侧栏底部等特定位置，然后它就会锚定在该侧栏底部。当你向上滚动时，它开始像一个固定的元素一样，随着你的滚动保持在屏幕上。这个功能被称为什么，如何实现？
3个回答
5
您可以使用https://github.com/wduffy/jScroll，但我知道那不完全是您想要的，滚动和div进入视图之间存在延迟，它不断需要追赶。

代码的根源是jQuery的.scroll()处理函数，因此这是一个很好的起点。据我所知，这种效果没有官方名称，但我在许多地方看到了它的描述，现在有人想知道它，我却找不到它！

编辑这就是我在寻找的内容：CSS-Tricks上的Persistent Headers

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

});
正如您所提到的，这正是为什么您不应该使用这种技术的原因。 - ninjagecko
5
你可以将位置设置为绝对定位，并将滚动事件添加到页面中，在该事件中根据滚动条的位置更改顶部CSS值（在jQuery中，它是scrollTop，在纯JavaScript中应该类似），然后添加条件，仅当scrollTop小于特定值时更改顶部，如侧边栏的offset.top +高度。
我认为这是正确的做法，而不是使用JavaScript。 - ninjagecko
2
你还应该阅读由jQuery的作者John Resig撰写的关于滚动事件和性能的文章：http://ejohn.org/blog/learning-from-twitter/ - jcubic
事实上，我发现大多数浏览器，甚至像 Chrome 这样针对速度进行了优化的现代浏览器，如果你使用 position:fixed 或滚动技巧，它们都会变得非常缓慢。 - ninjagecko
2
监听滚动事件，当滚动超过您想保持在视图中的元素时，将该元素的位置更改为“fixed”。
我创建了一个jsFiddle来说明这一点：http://jsfiddle.net/luisperezphd/EcsS6/ 有几件事情需要记住，例如固定元素将相对于窗口或具有“position: relative”的第一个父元素放置。
其次，当您将元素更改为“fixed”时，它会折叠它曾经所占用的空间，导致下面的内容向上移动。如果您希望效果看起来平滑，您必须放置一个占用与它相同空间的东西来代替它。
在我的jsFiddle示例中，我通过将标题元素包装在另一个元素中并设置其高度以匹配（以编程方式）来实现此目的。然而，有几种不同的方法可以实现这一点。
我还将包括下面的代码，在我的示例中，我使用了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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接