如何将元素定位到浏览器窗口的底部并仅在滚动时显示内容？答案

【问题标题】：How can I position an element to bottom of browser window and only showing content when scrolling?如何将元素定位到浏览器窗口的底部并仅在滚动时显示内容？
【发布时间】：2014-09-16 22:55:51
【问题描述】：

在以下链接中的网站上，当窗口调整大小时，徽标会停留在页面底部，并且在您向上或向下滚动网站之前，下方的内容是不可见的。这也适用于移动设备。如何管理它以将 DIV 定位到浏览器窗口的底部，以便在您开始滚动之前隐藏以下 DIV？这是一个站点的链接，它准确地显示了我想要重新编程的内容。

Please visit this Site as an example

提前致谢

【问题讨论】：

“logo”是指滚动到顶部的图标吗？
Show "Back to top" link element using jQuery when you scroll down的可能重复

标签： javascript jquery

【解决方案1】：

CSS：

#element {
display: none;
/* and other CSS */
}

jQuery:

$(document).on("scroll", function () {
    if ($(this).scrollTop() > 100) { /* change the integer to whatever you need */
        $("#element").fadeIn("slow");
    } else {
        $("#element").fadeOut("slow");
    }
});

【讨论】：

【解决方案2】：

首先，元素有固定的定位并被隐藏：

#dynamic-to-top {
    display: none;
    overflow: hidden;
    width: auto;
    z-index: 90;
    position: fixed;
    bottom: 20px;
    right: 20px;
    top: auto;
    left: auto;
    ...

然后，一个 jQuery 函数监听滚动事件。似乎进行了计算以查看页面是否向下滚动超过某个点。这种行为的许多例子存在于on SO 和网络上。

【讨论】：