我想创建一个div,它位于一个内容块的下面,但一旦页面已经滚动到足以接触其顶部边界,就会固定在原地并与页面滚动。


当前回答

你可以添加额外的3行,这样当用户滚动回顶部时,div将保持在原来的位置:

代码如下:

if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed'){
    $('.fixedElement').css({'position': 'relative', 'top': '200px'});
}

其他回答

你可以简单地使用css,将你的元素定位为fixed:

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

编辑:你应该有一个绝对位置的元素,一旦滚动偏移到达元素,它应该被改变为固定,顶部位置应该被设置为零。

你可以用scrollTop函数检测文档的顶部滚动偏移量:

$(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时,元素会粘在浏览器窗口的顶部,因为是固定放置的。

以下是Josh Lee的回答的扩展版本。如果你想让div在侧边栏的右边,并浮动在一个范围内(即,你需要指定顶部和底部锚位置)。它还修复了一个bug,当你在移动设备上查看这个(你需要检查左滚动位置,否则div将移出屏幕)。

function moveScroller() {
    var move = function() {
        var st = $(window).scrollTop();
        var sl = $(window).scrollLeft();
        var ot = $("#scroller-anchor-top").offset().top;
        var ol = $("#scroller-anchor-top").offset().left;
        var bt = $("#scroller-anchor-bottom").offset().top;
        var s = $("#scroller");
        if(st > ot) {
            if (st < bt - 280) //280px is the approx. height for the sticky div
            {
                s.css({
                    position: "fixed",
                    top: "0px",
                    left: ol-sl
                }); 
            }
            else
            {
                s.css({
                    position: "fixed",
                    top: bt-st-280,
                    left: ol-sl
                }); 
            }
        } else {
            s.css({
                position: "relative",
                top: "",
                left: ""
            });

        }
    };
    $(window).scroll(move);
    move();
}

截至2017年1月和Chrome 56的发布,大多数常用的浏览器都支持CSS中的position: sticky属性。

#thing_to_stick {
  position: sticky;
  top: 0px;
}

在火狐和Chrome浏览器中都是如此。

在Safari中,你仍然需要使用position: -webkit-sticky。

Polyfills可用于Internet Explorer和Edge;https://github.com/wilddeer/stickyfill似乎是个不错的网站。

你可以添加额外的3行,这样当用户滚动回顶部时,div将保持在原来的位置:

代码如下:

if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed'){
    $('.fixedElement').css({'position': 'relative', 'top': '200px'});
}

为回答这个问题提供的信息可能对你有帮助,埃文:

检查滚动后元素是否可见

基本上,只有在验证document.body.scrollTop值等于或大于元素的顶部之后,才希望修改元素的样式,将其设置为fixed。