Jquery在页面滚动时隐藏div_Jquery_Css

Jquery在页面滚动时隐藏div

jquery css

Jquery在页面滚动时隐藏div,jquery,css,Jquery,Css,我用这个css修复了页面底部的div： #bottomdiv { display:block; position:fixed; bottom:0px; left:0px; width:100%; text-align:center; height:40px; z-index:999; background-color: transparent; padding: 0 0 0 1px; } 我有footerdiv

我用这个css修复了页面底部的

div

：

#bottomdiv {
    display:block;  
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    text-align:center;
    height:40px;
    z-index:999;
    background-color: transparent;
    padding: 0 0 0 1px;
}

我有footer

div

和

class=“footergroup”

。现在，当页面滚动到页脚时，我需要使用Jquery效果隐藏

，当滚动到首页时显示

。

我猜您希望页脚的幻觉在向上滚动时收缩并粘住

要查找相对于屏幕底部的滚动位置，需要从滚动位置减去视口高度：

$（窗口）.scrollTop（）-$（窗口）.height（）

。要使过渡平滑，还需减去粘性页脚的高度

然后，您需要在页面上找到主页脚的偏移量。使用

$（“#footer”）.offset（）

可以轻松完成此操作

对于逻辑，您只需检查您的滚动位置是否为页脚距顶部的偏移量，并相应地使用

hide（）

所有这些都需要至少在三种情况下完成：

document.load

窗口。调整大小

窗口。滚动

标记：

<html>
    <head><title>Sticky Footer</title></head>
    <body>
        <div id="footergroup"></div>
        <div id="bottomdiv"></div>
    </body>
</html>

#bottomdiv {
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    height:40px;
    background-color: red;
}
#footergroup {
    height: 200px;
    background: blue;
}
#padding {
    height: 1000px;
}

$(document).on('load scroll', stickyFooter);
$(window).on('resize', stickyFooter);

function stickyFooter()
{
    var $footer = $("#footergroup");
    var $stickyFooter = $("#bottomdiv");
    var footerOffsetTop = $footer.offset().top;
    var viewportHeight = $(window).height();

    // Subtract your sticky footer's height for a more seamless transition.
    var scrollPosition = $(this).scrollTop() + viewportHeight - $stickyFooter.outerHeight();

    // This is the real magic.
    if(scrollPosition >= footerOffsetTop)
    {
        $stickyFooter.hide();
    }
    else
    {
        $stickyFooter.show();
    }
}

jQuery:

<html>
    <head><title>Sticky Footer</title></head>
    <body>
        <div id="footergroup"></div>
        <div id="bottomdiv"></div>
    </body>
</html>

#bottomdiv {
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    height:40px;
    background-color: red;
}
#footergroup {
    height: 200px;
    background: blue;
}
#padding {
    height: 1000px;
}

$(document).on('load scroll', stickyFooter);
$(window).on('resize', stickyFooter);

function stickyFooter()
{
    var $footer = $("#footergroup");
    var $stickyFooter = $("#bottomdiv");
    var footerOffsetTop = $footer.offset().top;
    var viewportHeight = $(window).height();

    // Subtract your sticky footer's height for a more seamless transition.
    var scrollPosition = $(this).scrollTop() + viewportHeight - $stickyFooter.outerHeight();

    // This is the real magic.
    if(scrollPosition >= footerOffsetTop)
    {
        $stickyFooter.hide();
    }
    else
    {
        $stickyFooter.show();
    }
}

你试过什么？