滚动固定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);