css – 我可以永远保持DIV在屏幕上,但并不总是处于固定位置？

我的网站有一个主表，我想把一个div放在主表中的内容区顶部。尽管滚动位置，此div始终可见。这可能吗？

一张照片会更好地解释。

解决方法

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

标记很简单，但每个部分都有一些重要的注释。

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动态设置左或右css属性。

原文地址：https://www.jb51.cc/css/218644.html