首页 文章

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

提问于
浏览
0

我想在页面底部添加一个粘性条,我想让它在用户通过滚动到达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 回答

  • 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
       }
    }
    

相关问题