How to stop a floating div at a specified point using jQuery

Question

I am trying to stop a floating (sliding) div when it reaches the bottom of the containing div, but it does not work. The bottom variable is the lowest point on the page containing the div, but for some reason does not work as it should. Does anyone have a better method?

 $(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 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

Try the following conditions:

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

Once you scroll through the DIV container (#mainBody), the floating DIV (#buttonsDiv) should be positioned “absolute” to the bottom of the DIV container.

Answer 2

A simple definition of a lower limit with a floating div or padding-bottom with an external div should help in this case. I used a similar thing on the following website: www.emotionstorm.com to stop the shopping cart under the top banner. Please let me know if you need help for similar code.