Einstellen der CSS-Wert-Grenzen der Fenster-Scrolling-Animation

Question

Ich habe eine < div id = 'Karte'> Karte, die beim Herunterscrollen des Benutzers verschoben wird. Es scheint jedoch, die Karte für immer zu scrollen, so dass der Benutzer nie den unteren Rand der Seite erreichen kann (es gibt eine Fußzeile).

Was ich versuche zu tun ist, dass die < div> aufhören zu scrollen, wenn es das Ende einer anderen dynamisch Größe erreicht (Höhe ist variabel) < div>. Diese zwei < div> s sind Seite an Seite und in der gleichen Reihe.

Hier ist die JavaScript-Code, den ich mit der rechten div bewegen sich mit der Benutzer-Rolle zu machen:

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

Sie nicht animate() Methode mit Scroll-Funktion kann es Konflikte schaffen, weil Scroll-Wert immer verändern wird und jQuery kann die gleiche Animation nicht unendlich wiederholen. Stop wird dieses Problem auch nicht retten, oder ich werde es nicht schaffen.

Und ich suggest to use variation in if Aussagen.

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

Hinweis: Wenn Sie Ihre erweitern möchten, wenn Aussagen mit else if, nicht else verwenden, wird es Konflikte schaffen. Bealive ich bin wirklich sehr erfahren mit diesem Thema.

UPDATE:

Sie können auch Ihre approuch Berechnungen der Grenzen ändern. Ich nehme an, Sie wollen die nav beheben und Ihre HTML ist wie folgt:

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

und jQuery Berechnungen sollte wie folgt sein: 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'}); 
     } 
    }); 
});​