-2

我已经div用这个 CSS 固定在页面底部：

#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"。现在我需要 <div id="bottomdiv">在页面滚动到达页脚时使用 Jquery 效果隐藏并在滚动到首页时<div class="footergroup">显示<div id="bottomdiv">。

4

1 回答 1

2

我猜你希望向上滚动时页脚的错觉会缩小并粘住。

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

然后你需要在页面上找到你的主要页脚的偏移量。这很容易使用$("#footer").offset().

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

所有这些都需要至少在三个场合完成：

  1. document.load
  2. window.resize
  3. 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();
    }
}

请参阅此代码。

于 2013-02-02T00:05:09.923 回答