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

时间:2014-01-22 15:15:53

标签: javascript jquery html css

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

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

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

感谢。

3 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

我用过:

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