当一个div被滚动到屏幕顶部时，我如何才能将它固定在屏幕顶部呢？

Question

当一个div被滚动到屏幕顶部时，我如何才能将它固定在屏幕顶部呢？我想要创建一个div，它位于一个内容块下面，但是一旦页面被滚动到足以与其顶部边界联系起来，就会固定在适当的位置，并与页面一起滚动。

Answer 1

您可以简单地使用css，将元素定位为固定:

.fixedElement {
    background-color: #c0c0c0;
    position:fixed;
    top:0;
    width:100%;
    z-index:100;}

编辑：您应该拥有绝对位置的元素，一旦滚动偏移量到达元素，它应该被更改为固定的，顶部位置应该设置为零。

控件可以检测文档的顶部滚动偏移量。滚动顶职能：

$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 && isPositionFixed){
    $el.css({'position': 'static', 'top': '0px'}); 
  } });

当滚动偏移量达到200时，元素将棍子到浏览器窗口的顶部，因为是以固定的方式放置的。

Answer 2

你已经在Google代码上看到了这个例子问题页以及(直到最近)堆栈溢出的编辑页面。

CMS的答案不会在你向上滚动时恢复定位。下面是堆栈溢出中无耻的被盗代码：

function moveScroller() {
    var $anchor = $("#scroller-anchor");
    var $scroller = $('#scroller');

    var move = function() {
        var st = $(window).scrollTop();
        var ot = $anchor.offset().top;
        if(st > ot) {
            $scroller.css({
                position: "fixed",
                top: "0px"
            });
        } else {
            $scroller.css({
                position: "relative",
                top: ""
            });
        }
    };
    $(window).scroll(move);
    move();}

<div id="sidebar" style="width:270px;"> 
  <div id="scroller-anchor"></div> 
  <div id="scroller" style="margin-top:10px; width:270px"> 
    Scroller Scroller Scroller  </div></div><script type="text/javascript"> 
  $(function() {
    moveScroller();
  });</script>

一个简单的现场演示.

一个新的、没有脚本的替代方案是position: sticky，它在Chrome、Firefox和Safari中得到了支持。见关于HTML 5岩石的文章和演示，和Mozilla博士.