在DOM中滾動移動元素，稍後鎖定到屏幕頂部

Question

我已經寫了一個腳本，它將滾動（> = 100）上的元素.wrap向下移動到DOM下方，然後在移動的元素到達後​​將其設置爲position:fixed; top:0;頁面頂部。

結果很不幸的是越野車。元素移動位置，稍後鎖定到屏幕頂部，但是當您嘗試向上滾動頁面時，當您滾動 時，重定位元素（現在鎖定到頁面頂部）會閃爍，我也剛剛意識到當您滾動到頁面頂部 （問題已解決，請參閱下面的註釋）時，.wrap不會移回原始位置。我也關注性能，因爲我正在使用滾動事件處理程序。

有關此問題的示例，請參閱此Fiddle。

作爲獎勵，我試圖在元素移動之前添加淡入/淡出。任何幫助在這裏將不勝感激。

$(window).scroll(function() { 
    if ($(this).scrollTop() >= 100) { 
     /*$('.wrap').fadeOut('slow'); 
     $.when(setTimeout(function() { 
      $('.wrap').insertAfter('.jumbotron').addClass('moved'); 
     }, 2000)).then(function() { 
      $('.wrap.moved').fadeIn('slow'); 
     });*/ 
     $('.wrap').insertAfter('.jumbotron').addClass('moved'); 
     var stickyHeader = $('.wrap.moved').offset().top; 
     $(window).scroll(function() { 
      if ($(window).scrollTop() > stickyHeader) { 
       $('.wrap.moved').css({ 
        position: 'fixed', 
        top: '0px' 
       }); 

      } else { 
       $('.wrap.moved').css({ 
        position: 'static', 
        top: '0px' 
       }); 

      } 
     }) 
    } else { 
     $('.wrap').insertBefore('.space').removeClass('moved'); 

    } 
}); 

Answer 1

當您嘗試備份滾動頁面重新定位的元素（現在 鎖定到頁面頂部）閃爍爲您滾動

那是因爲你不斷做一個當滾動小於100時爲insertBefore。反之亦然。

要解決這個問題，請使用變量來緩存狀態。將您的邏輯封裝在檢查狀態的條件中，然後才能啓動代碼。事情是這樣的：

var sticky = false; 
$(window).scroll(function() { 
    if ($(this).scrollTop() >= 100) { 
     if (!sticky) { 
      //... your logic here 
      sticky = true; 
     } 
    } else { 
     if (sticky) { 
      $('.wrap').insertBefore('.space').removeClass('moved'); 
      sticky = false; 
     } 
    } 
}); 

你的小提琴：http://jsfiddle.net/abhitalks/kmx4w83w/3/