Javascript scroll fixed scrollTop（）的跳跃效果

我指的是以下教程：

虽然页面中的演示看起来不错，但是当我在我的站点上实现它时，我得到了“跳跃”效果。通常情况下，第一项会跳到第二项的一半

我该如何解决这个问题

以下是我的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);

$（文档）.ready（函数（）{
$（'#map_container'）.css（“width”，$（'#map'）.width（））；
$（“#映射_容器”）.scrollFixed（{hideBeforeDiv:'footer}）；
});
（函数（$）{
$.fn.scrollFixed=函数（参数）{
params=$.extend（{apperaafterdiv:0，hideBeforeDiv:0}，params）；
var元素=$（此）；
if（参数appearAfterDiv）
var distanceTop=element.offset（）.top+$（params.apperaafterdiv.outerHeight（true）+element.outerHeight（true）；
其他的
var distanceTop=element.offset（）.top；
if（参数hideBeforeDiv）
var bottom=$（params.hideBeforeDiv.offset（）.top-element.outerHeight（true）-10；
其他的
var底部=200000；
$（窗口）。滚动（函数（）{
if（$（窗口）.scrollTop（）>distanceTop&&$（窗口）.scrollTop（）

当Javascript动态地向

#map_容器

添加一个

位置：fixed

时，只需使用CSS将相同的

#map_容器

高度应用到

ul

的第一项即可。使用SCS完成以下解决方案：

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