設置窗口滾動動畫的CSS值限制

Question

我有一個< div id ='map'>地圖，當用戶向下滾動時滑動。然而，它似乎讓地圖永遠滾動，永遠不會讓用戶真正到達頁面的底部（有一個頁腳）。

我想要做的是得到< div>停止滾動，當它到達另一個動態大小（高度是變量）< div>的末尾。這兩個< div> s是並列在同一行中。

這裏是我使用，使用戶的滾動右邊的div移動的JavaScript代碼：

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

不能使用animate()方法與滾動功能會造成衝突，因爲滾動值會改變的，和jQuery不能無限重複相同的動畫。停止也不會挽救這個問題，或者我無法做到這一點。

而我suggest to use variation在if陳述。

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

注意：如果你想擴展您如果與else if語句，不要用else，它會創建太大沖突。對我來說，我對這個問題非常滿意。

UPDATE：

您可以approuch改變的極限計算過。我想你要修復的資產淨值和你的HTML是這樣的：

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

和jQuery的計算應該是這樣的： 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'}); 
     } 
    }); 
});​