jquery - 如何在滚动时固定 div

Question

有没有一种使用 JQuery 的方法可以检测 div 何时开始离开屏幕，并更改其 CSS 以使其位置变为固定并卡在窗口底部？

Answer 1

如果我是正确的，我认为您正在寻找的是带有航点的 JQuery 中的粘性元素。看看这个页面：JQuery Waypoints

Answer 2

CSS

.div-fixed {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

JS

if ($('#mydiv').offset().top() + $('#mydiv').height() > $(document).height()) {
  $('#mydiv').addClass('div-fixed');
}

Answer 3

这是我以前使用过的jsFiddle 演示。

jQuery：

var stickerTop = parseInt($('#sticker').offset().top);
$(window).scroll(function() {
    $("#sticker").css((parseInt($(window).scrollTop()) + parseInt($("#sticker").css('margin-top')) > stickerTop) ? {
        position: 'fixed',
        top: '0px'
    } : {
        position: 'relative'
    });
});

Answer 4

JS

var backup_position_toolbar = $('#toolbar').offset().top;
$(window).scroll(function() {
    if ( $('#toolbar').offset().top - $(window).scrollTop() < 0 ) $('#toolbar').addClass('fixed');
    if ( $(window).scrollTop() < backup_position_toolbar ) $('#toolbar').removeClass('fixed');
});

CSS

.fixed {
    margin: 1px;
    position: fixed;
    top: 0;
}