Question

我在我的网站上添加了一个粘性的“号召性用语”栏，它就像粘性导航一样，但它粘在窗口底部，它在页面中的原始位置滚动过去，然后又跳回来到文件的流程。

当滚动位置小于条形原始位置的垂直位置时，它使用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);

任何人都可以指出我正确的方向，我需要改变什么才能让大小调整时停止闪烁？

感谢。

Answer 1

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

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 2

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

Answer 3

我在Mozilla中发现.resize（）导致很多页面闪烁，因为它被驱动得太厉害了。

我用过：

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

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

3 个答案: