Cómo detener el div flotante en el punto especificado usando jQuery

Question

Estoy intentando detener un div flotante (deslizante) cuando llega al final de un div que contiene pero no funciona. La variable bottom es el punto más bajo en la página del div que contiene, pero por alguna razón no actúa como debería. Alguien tiene un mejor método?

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

Pruebe las siguientes condiciones:

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

Una vez se desplaza más allá de la DIV contenedor (#mainBody), el DIV flotante (#buttonsDiv) debe colocarse 'absoluto' a la parte inferior del contenedor DIV.

Answer 2

Simplemente definir un fondo de margen con div flotante o fondo acolchado con div externo en este caso debería ayudar. He usado algo similar en el siguiente sitio web: www.emotionstorm.com para detener el carrito de compras debajo del banner superior. Por favor, hágame saber si necesita ayuda para un código similar.