頁面調整大小的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粘滯欄閃爍

回答

相關問題