Question

我想在页面底部添加一个粘性条，我想让它在用户通过滚动到达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而不是隐藏时才会显示它会卡在屏幕中央。

Answer 1

呼！我花了一段时间，因为我仍然是一个javascript的初学者，但我想我明白了。注意：由于您只是在javascript中将位置从固定更改为绝对，因此条形图在某些屏幕尺寸中卡在中间。相反，将显示从块更改为隐藏。
另请注意#bottbar的css应已为display:block

我相信你的要求是：
1.它不应该显示用户屏幕是否足够大以显示div通常为 2.一旦用户通过滚动到达div，就淡出

请参阅：JSFIDDLE

$(document).ready(function() {
    if($(window).height() > $('#stopDiv').offset().top) {
        $("#bottbar").css('display', 'none'); 
    }
    else {
        $("#bottbar").css('display', 'block');
    }
});
$(window).bind("scroll", function() {
    if($(window).height() > $('#stopDiv').offset().top) {
        $("#bottbar").css('display', 'none');
    }
    if ($(this).scrollTop() > -1) { //Fade in at a level of height
        $("#bottbar").css('display', 'block');
        checkOffset();
    } 
    else {
        $("#bottbar").css('display', 'none');
    }
});
function checkOffset() {
    if($('#bottbar').offset().top + $('#bottbar').height() >= $('#stopDiv').offset().top) {
        $('#bottbar').css('display', 'none');
    }
    if($(window).scrollTop() + $(window).height() < $('#stopDiv').offset().top) {
        $('#bottbar').css('display', 'block'); // restore when you scroll up
   }
}

显示粘滞栏直到用户向下滚动到<div> </div>

1 个答案: