javascript - 如何使用jQuery在指定点停止 float div

Question

我试图在 float (滑动)div 到达包含 div 的底部时停止它，但它不起作用。变量 bottom 是包含 div 的页面上的最低点，但由于某种原因没有按应有的方式运行。谁有更好的方法？

$(document).ready(function () {

    var top = $('#buttonsDiv').offset().top - parseFloat($('#buttonsDiv').css('margin-top').replace(/auto/, 0));
    var bottom = $('#mainBody').offset().top + $('#mainBody').height();

    $(window).scroll(function (event) {

        // what the y position of the scroll is
        var y = $(this).scrollTop();
        var z = y + $('#buttonsDiv').height();

        // whether that's below the form
        if (y >= top && z <= bottom) {
            // if so, add the fixed class
            $('#buttonsDiv').addClass('fixed');
        } else {
            // otherwise remove it
            $('#buttonsDiv').removeClass('fixed');
        }
    });
});

Answer 1

尝试以下条件:

 if (y >= top && z <= bottom) {
    // if so, add the fixed class
    $('#buttonsDiv').addClass('fixed');
 } else if(z > bottom) {
    // otherwise remove it
    $('#buttonsDiv').removeClass('fixed').addClass('absolute');
 } else {
    // otherwise remove it
    $('#buttonsDiv').removeClass('fixed');
 }

滚动到容器 DIV (#mainBody) 后， float DIV (#buttonsDiv) 应“绝对”定位到容器 DIV 的底部。