jquery - スクロール中にdivを固定する方法

Question

JQuery を使用して、div がオフスクリーンになり始めたことを検出し、CSS を変更して、その位置が固定に変更され、ウィンドウの下部に固定されるようにする方法はありますか?

Answer 1

私が正しければ、あなたが探しているのは、ウェイポイントを備えた JQuery のスティッキー要素だと思います。このページを見てください: JQuery Waypoints

Answer 2

以前に使用した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 3

CSS

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

JS

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

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