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 と比較して確認できます。一番下まで100px以内にしたい場合は...

$(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});
    }
});