如何在滚动时固定div

Question

有没有办法使用JQuery，我可以检测div何时开始离屏，并更改其CSS以使其位置更改为固定并粘贴在窗口的底部？

Answer 1

我认为你正在寻找的是JQuery中的Sticky Elements和路标，如果我是正确的话。请查看此页面：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 demo 。

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;
}