javascript - 滚动固定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 动态添加 aposition: fixed到 时#map_container，只需使用 CSS 将相同的#map_container高度应用到ul. 以下解决方案是使用 SCSS 完成的：

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