Establecimiento de los límites de valores CSS de la animación de desplazamiento de ventana

Question

Tengo un mapa < div id = 'map'> que se desliza a medida que el usuario se desplaza hacia abajo. Sin embargo, parece dejar que el mapa se desplace para siempre, sin permitir que el usuario llegue al final de la página (hay un pie de página).

Lo que intento hacer es obtener el < div> para dejar de desplazarse cuando llega al final de otro tamaño dinámico (la altura es variable) < div>. Estos dos divs < están uno al lado del otro y en la misma fila.

Este es el código JavaScript que estoy usando para hacer el movimiento div derecho con desplazamiento del usuario:

$(function() { 

    var $sidebar = $("#map"), 
     $window = $(window), 
     offset  = $sidebar.offset(), 
     topPadding = 15; 

    $window.scroll(function() { 
     if ($window.scrollTop() > offset.top) { 
      $sidebar.stop().animate({ 
       marginTop: $window.scrollTop() - offset.top + topPadding 
      }); 
     } 
     else { 
      $sidebar.stop().animate({ 
       marginTop: 0 
      }); 
     } 
    }); 
}); 

Answer 1

No puede utilizar animate() método con función de desplazamiento que va a crear un conflicto porque el valor de desplazamiento cambiará siempre y jQuery no puede repetir infinitamente la misma animación. Stop tampoco rescatará este problema, o no lograré hacerlo.

e i suggest to use variation en if declaraciones.

Here is not working animate sample with animate usage.

Here is same example working with css method.

$(window).scroll(function() { 
    var scrollVal = $(this).scrollTop(); 
    if (scrollVal > offset.top) { 
     $sidebar.css({ 
      'margin-top': (($window.scrollTop() - offset.top) + topPadding) + 'px' 
         //added +'px' here to prevent old internet explorer bugs 
     }); 
    } else { 
     $sidebar.css({'margin-top':'0px'}); 
    } 
}); 

Nota: si desea ampliar sus instrucciones if con else if, no utilizan else, se creará un conflicto también. Bealive me estoy realmente expreienced con este problema.

ACTUALIZACIÓN:

Puede cambiar su approuch a los cálculos de los límites también. Supongo que quiere fijar el NAV y su html es así:

<div class="wrapper"> 
    <div class="header">header</div> 
    <span id="subnav">hold this</span> 
</div>​ 

y cálculos jQuery debe ser como este: Here is working jsFiddle.

$(document).ready(function() { 
    $(window).scroll(function() { 
     var headerH = $('.header').outerHeight(true); 
     //this will calculate header's full height, with borders, margins, paddings 
     console.log(headerH); 
     var scrollVal = $(this).scrollTop(); 
     if (scrollVal > headerH) { 
     //when scroll value reach to your selector 
      $('#subnav').css({'position':'fixed','top' :'0px'}); 
     } else { 
      $('#subnav').css({'position':'static','top':'0px'}); 
     } 
    }); 
});​