我在我的网站上添加了一个粘性的“号召性用语”栏,它就像粘性导航一样,但它粘在窗口底部,它在页面中的原始位置滚动过去,然后又跳回来到文件的流程。
当滚动位置小于条形原始位置的垂直位置时,它使用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);
任何人都可以指出我正确的方向,我需要改变什么才能让大小调整时停止闪烁?
感谢。
答案 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;
}
答案 1 :(得分:0)
您报告的闪烁很可能是因为Javascript没有像滚动那样快速地呈现DOM更改。正如@Switching Brains所提到的,尝试使用CSS将页脚从窗口底部绝对定位在0px处。然后,您只需要Javascript找到您到达页面底部的位置,然后应用您的课程将其保持在固定位置。
答案 2 :(得分:0)
我在Mozilla中发现.resize()导致很多页面闪烁,因为它被驱动得太厉害了。
我用过:
$window.resize(throttle(500,function(){