Question

我已经使用此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;
}

我的页脚div与class="footergroup"。现在我需要在页面滚动时使用Jquery效果隐藏<div id="bottomdiv">到达页脚<div class="footergroup">并在滚动到首页时显示<div id="bottomdiv">。

Answer 1

我猜你想要向上滚动时缩小和粘贴页脚的错觉。

要查找相对于屏幕底部的滚动位置，您需要从滚动位置减去视口高度：$(window).scrollTop() - $(window).height()。要使过渡平滑，还要减去粘性页脚的高度。

然后您需要在页面上找到主页脚的偏移量。这可以使用$("#footer").offset()轻松完成。

对于逻辑，您只需要检查您的滚动位置是否>=您的页脚偏离顶部并相应地使用hide()。

所有这些都需要至少三次完成：

document.load
window.resize
window.scroll

标记：

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

<强> CSS：

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

jQuery：

$(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();
    }
}

<强> See this code in action.

当页面滚动时，Jquery隐藏div

1 个答案: