jquery - 如何为 jQuery 浮动 div 设置下限

Question

我有一个像你div一样animate上下的scroll，这是代码，

$(document).ready(function(){
    $(window).scroll(function () {
      set = $(document).scrollTop()+"px";
            $('#bymail-inner').animate({top:set},{duration:500,queue:false});
    });
});

它真的很好用，但是一旦它接近页面底部，有没有办法阻止它？

Answer 1

您可以获取视口高度并对照 scrollTop 进行检查。如果你想让它离底部不超过 100 像素......

$(window).scroll(function () {
    // added a var so set won't be a global variable
    var set = $(window).height() - 100 > $(document).scrollTop() ? $(document).scrollTop() : $(window).height() - 100;
    $('#bymail-inner').animate({top:set},{duration:500,queue:false});
});

它使用三元运算符来查看视口 - 100 是否大于滚动顶部，如果是则使用滚动顶部，否则将其设置为视口高度 - 100。

Answer 2

有一个很好的方法可以使用一点 DOM 数学来检测用户是否在页面底部附近滚动：

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
        //User near the bottom, fix it where you want the element to be
        $('#bymail-inner').animate({top:($(window).height()/2)},{duration:500,queue:false});
    }else{
        set = $(document).scrollTop()+"px";
        $('#bymail-inner').animate({top:set},{duration:500,queue:false});
    }
});