我想在页面底部添加一个粘性条,我想让它在用户通过滚动到达div时淡出,一旦用户向上滚动再次淡入,并且div不再在屏幕上 .
并且它不应该显示用户屏幕是否足够大以正常显示div .
请大家帮帮我......
我目前正在使用此代码: -
<script type="text/javascript">
//<![CDATA[
$(window).bind("scroll", function() {
if ($(this).scrollTop() > -1) { //Fade in at a level of height
$("#bottbar").fadeIn();
checkOffset();
} else {
$("#bottbar").stop().fadeOut();
}
});
function checkOffset() {
if($('#bottbar').offset().top + $('#bottbar').height() >= $('#stopDiv').offset().top) {
$('#bottbar').css('position', 'absolute');
}
if($(window).scrollTop() + $(window).height() < $('#stopDiv').offset().top) {
$('#bottbar').css('position', 'fixed'); // restore when you scroll up
}
}
//]]>
</script>
但它在我的网站bookaire.com上没有按预期工作
我不确定这个代码的问题是什么,它没有显示网站加载时的栏,它只显示用户滚动一点点,当它到达 stopdiv
而不是隐藏栏时它会卡在屏幕中心 .
1 回答
呼!这花了我一段时间,因为我仍然是一个javascript初学者,但我想我明白了 . 注意:由于您只是在javascript中将位置从固定更改为绝对,因此条形图在某些屏幕尺寸中卡在中间 . 相反,将显示从块更改为隐藏 .
另请注意
#bottbar
的css应该已经是display:block
我相信您的要求是:
1.如果用户屏幕大到足以正常显示div,则不应显示
2.一旦用户通过滚动到达div,就淡出
见:JSFIDDLE