在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/