jQueryを使用して指定されたポイントで浮動小数点divを停止する方法

Question

浮動小数点数（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）を過ぎてスクロールすると、浮動DIV（#buttonsDiv）が容器の底に '絶対' に配置する必要がありますDIV。

Answer 2

この場合、margin-bottomをfloating divまたはpadding-bottomをexternal divと定義するだけで効果的です。私は次のウェブサイトで同様のことをしています：www.emotionstorm.comトップバナーの下のショッピングカートを止める。 同様のコードのヘルプが必要な場合はお知らせください。