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

Question

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

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

问题是，当我调整页面大小时，我会出现令人讨厌的闪烁，并且该栏经常从 View 中消失。

我使用的代码如下...

(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 进行定位，然后应用您的类将其固定在固定位置。