页面调整大小的JQuery粘滞栏闪烁

我在我的网站上添加了一个粘性的“号召性用语”栏，它的工作原理类似于粘滞导航，但它粘在窗口的底部，它在页面中的原始位置滚动过去，然后它跳回到文档的流程。页面调整大小的JQuery粘滞栏闪烁

当滚动位置小于条的原始位置的垂直位置时，它使用CSS类'.sticky'添加固定位置。

问题是，当我调整页面的大小时，我得到一个令人讨厌的闪烁，并且酒吧更多时候从视图中消失。

我使用的是下面的代码...

(function() { 

    $(window).on('resize', function() { 

     var stickyNavTop = $('#wrap-bar').offset().top; 

     var stickyNav = function(){ 

      var scrollBottom = $(window).scrollTop() + $(window).height() - $('.cta-bar').height(); 

      if (scrollBottom < stickyNavTop) { 
       $('#wrap-bar').addClass('sticky'); 
       $('#wrap-bar-dummy').show(); 
      } else { 
       $('#wrap-bar').removeClass('sticky'); 
       $('#wrap-bar-dummy').hide(); 
      } 

     }; 

     stickyNav(); 

     $(window).scroll(function() { 
      stickyNav(); 
     }); 

    }); 

    $(document).ready(function() { 
     $(window).trigger('resize'); 
    }); 

})(jQuery);

任何人都可以点我在正确的方向，以什么我需要改变，以获得巴停止调整大小时闪烁？

谢谢。

来源

2014-01-22 Dijon

也许一个奇怪的想法，但你可以使＃包裹栏位置绝对然后底部：0与CSS？没有jQuery需要呢？ –

我需要jQuery，因为我希望当页面变成不同的部分时，它会跳回到页面的流程中。例如，当表单或页脚在视图中时，行动号召不相关。 – Dijon

我想你可以用CSS来做到这一点。然后，如果酒吧到达某个锚点，则可以使用jQuery将酒吧保持在锚点位置。 –

您报告的闪烁很可能是因为Javascript没有像您滚动一样快速渲染您的DOM更改。正如@Switching Brains所提到的那样，尝试使用CSS将窗口从窗口底部绝对定位在0px处。然后，只有当Javascript到达页面底部时才需要定位，然后应用您的课程将其保持在固定的位置。

来源

2014-01-22 15:25:43

它不会在滚动上闪烁，仅在调整大小时闪烁。我不需要栏显示在页面的底部，绝对定位只会在父元素没有位置值的情况下实现。使用CSS'固定'位置会将其锁定到页面的底部，这就是'粘性'类所做的。直到div的原始位置滚动过去，然后将其移除。 – Dijon

A的本真的肮脏的例子，但你会得到的想法：

HTML

<div id="body"> 
    <div id="bar">Bar at the bottom</div> 
</div>

CSS

html, body { 
    height:100%; 
    widht:100%; 
} 

#body { 
    position:relative; 
    height:100%; 
    border:1px solid #000000; 
} 

#bar { 
    position:absolute; 
    bottom:20px; 
    width:300px; 
    left:50%; 
    margin-left:-150px; 
    background-color:#cccccc; 
}

http://jsfiddle.net/Auc6n/

来源

2014-01-22 15:28:42

这不是我想要达到的，请看看这里的例子... http://www.haydockoffice.co.uk/crm/green-deal.html。我不希望酒吧永久固定在页面的底部。 – Dijon

我发现在Mozilla认为。调整大小（）导致大量页面闪烁，因为它太被驱动了。

我用：

$window.resize(throttle(500,function(){

来源

2015-07-21 16:18:00 UllerUller

页面调整大小的JQuery粘滞栏闪烁

回答

相关问题