0

私は次のチュートリアルを参照しています：

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

ページのデモは問題ないように見えますが、自分のサイトに実装すると、「ジャンプ」効果が得られます。多くの場合、最初のアイテムはジャンプし、2番目のアイテムの半分にまっすぐになります。

これを修正するにはどうすればよいですか？

以下は私の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);
4

1 に答える 1

0

Javascriptが動的にをに追加する場合、CSSを使用position: fixedし#map_containerて同じ#map_container高さをの最初の項目に適用しますul。次の解決策は、SCSSを使用して実行されます。

#map_container {
  &.fixed {
    position: fixed;
    top: 0;
    & ~ .ul .li:first-child {
      margin-top: 210px;
    }
  }
于 2012-09-10T09:26:09.947 に答える