JQuery粘条在页面调整大小时闪烁

Question

我在我的网站上添加了一个粘性“号召性用语”栏，它的工作方式类似于粘性导航，但是它被固定在窗口底部，它在页面中的原始位置被滚动过去，然后又跳回到文档的流程。

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

问题是，当我调整页面大小时，我得到了令人讨厌的闪烁，并且该栏经常从视图中消失。

我正在使用的代码如下...

(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);

谁能指出我需要更改哪些内容才能让栏在调整大小时停止闪烁的正确方向？

谢谢。

Answer 1

您报告的闪烁很可能是因为 Javascript 不会像您滚动一样快速呈现您的 DOM 更改。正如@Switching Brains 所提到的，尝试使用 CSS 将您的页脚绝对定位在距窗口底部 0px 处。然后，您只需要 Javascript 在您到达页面底部时进行定位，然后应用您的类将其保持在固定位置。

Answer 2

这是一个非常肮脏的例子，但你会明白的：

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/

Answer 3

我在 Mozilla 中发现 .resize() 会导致很多页面闪烁，因为它被驱动得太猛了。

我用过：

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