固定滾動的滾動效果scrollTop（）

Question

我指的是以下教程：

http://www.webdeveloperjuice.com/2011/08/07/how-to-fix-element-position-after-some-scroll-using-jquery/

雖然頁面中的演示看起來不錯，但是當我在自己的網站上實現該演示時，我得到了“跳躍”的效果。 通常，第一項跳到第二項的一半。

我該如何解決？

以下是我的HTML：

<div id="map_container">
  <div id="map" class="well"></div>
</div>

<ul>
  <li>1. Many contents here...</li>
  <li>2. Many contents here...</li>
  <li>3. Many contents here...</li>
  <li>4. Many contents here...</li>
  <li>5. Many contents here...</li>
  <li>6. Many contents here...</li>
  <li>7. Many contents here...</li>
</ul>

以下是Javascript：

$(document).ready( function(){
  $('#map_container').css("width", $('#map').width());
  $("#map_container").scrollFixed({hideBeforeDiv:'footer'});
});

(function($){
    $.fn.scrollFixed = function(params){
    params = $.extend( {appearAfterDiv: 0, hideBeforeDiv: 0}, params);
    var element = $(this);

    if(params.appearAfterDiv)
        var distanceTop = element.offset().top + $(params.appearAfterDiv).outerHeight(true) + element.outerHeight(true);
    else
        var distanceTop = element.offset().top;

    if(params.hideBeforeDiv)
        var bottom = $(params.hideBeforeDiv).offset().top - element.outerHeight(true) - 10;
    else
        var bottom = 200000;                

        $(window).scroll(function(){    
            if( $(window).scrollTop() > distanceTop && $(window).scrollTop() < bottom )         
                element.css({'position':'fixed', 'top':'0'});
            else
                element.css({'position':'static'});             
        });           
    };
})(jQuery);

Answer 1

當Javascript動態添加position: fixed於#map_container ，只需使用CSS將相同的#map_container高度應用於ul的第一項即可。 以下解決方案是使用SCSS完成的：

#map_container {
  &.fixed {
    position: fixed;
    top: 0;
    & ~ .ul .li:first-child {
      margin-top: 210px;
    }
  }