我可以将 DIV 始终显示在屏幕上，但不始终位于固定位置吗？

Question

我的网站有一个主表单，我想将一个 div 停靠到主表单内内容区域的顶部。尽管有滚动位置，这个 div 应该始终可见。这可能吗？

图片会更好地解释它。

原文由 Rachel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我发布了一个 示例 作为评论，所以我想我会写出一个完整的答案。

标记非常简单，但每个部分都有一些重要说明。

HTML

 <div id="page">
    <div id="header">
        <div id="header-inner"> <!-- Note #1 -->
            <img src="http://placehold.it/300x100" />
        </div>
    </div>
    <div id="content">
        <!-- Some Content Here -->
    </div>
</div>

CSS

 #page {
    padding: 100px;
    width: 300px;
}

#header,
#header-inner { /* Note #1 */
    height: 100px;
    width: 300px;
}

.scrolling { /* Note #2 */
    position: fixed;
    top: 0;
}

JavaScript

 //jQuery used for simplicity
$(window).scroll(function(){
  $('#header-inner').toggleClass('scrolling', $(window).scrollTop() > $('#header').offset().top);

  //can be rewritten long form as:
  var scrollPosition, headerOffset, isScrolling;
  scrollPosition = $(window).scrollTop();
  headerOffset = $('#header').offset().top;
  isScrolling = scrollPosition > headerOffset;
  $('#header-inner').toggleClass('scrolling', isScrolling);
});

注意#1

滚动标题将使用 position: fixed 附加到页面顶部，但此样式将从内容流中删除内容，这将导致内容跳转，除非其容器保持原始高度。

笔记2

样式属于 CSS，但是可能很难将某些元素与其原始位置正确对齐。您可能需要通过 JavaScript 动态设置 left 或 right css 属性。

原文由 zzzzBov 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

截至 2018 年 7 月，是时候重新审视这个问题了。 position: sticky 正是针对像您这样的问题而引入的，并且具有 不错的浏览器支持。

它是这样工作的：

 <div style="position: sticky; top: 0;"> Header </div>

其中 top 是滚动时 div 应该停留在视口顶部的距离。 指定 top 是强制性的。 其他选项，如 bottom ， left 或 right 目前 不 工作。

粘性 div 在所有方面都像普通 div 一样，除了当您滚动经过它时，它会粘在浏览器的顶部。

这是一个给你一个想法的 jsfiddle 。

原文由 npas 发布，翻译遵循 CC BY-SA 4.0 许可协议