Question

当您使用jQuery滚动到某个点（例如：http://jsfiddle.net/2rhrc/）时，我看到过将菜单固定在页面顶部的脚本。我知道我可以在底部对齐。但是，我可以使用jQuery根据页面底部滚动到某个点（在我的问题中，我建议250px，但这可以改变）并让我的栏淡入并保持固定在底部？当我从底部滚动高于250px时，条形将淡出，但当我达到250px或更低时，它会淡入。我发现从页面顶部开始测量的过多，但我找不到底部的测量结果。

我想用它在我的Wordpress博客中显示上一个/下一个帖子栏。我不知道如何最好地做到这一点，使用Wordpress插件或我的div的自定义脚本，并使用Wordpress插入下一个/上一个链接。我想完全控制风格，所以我一直在寻找预先制作的插件来看看可以做些什么。任何帮助都会很棒。

要了解我的意思，请参阅http://www.buzzingup.com/2011/07/how-to-transfer-your-facebook-photos-to-google-plus/。我知道它使用jQuery，但我似乎找不到使用的插件。

Answer 1

基本数学，以确定您是否距离页面底部小于250px：

$(document).height() - $(window).height() - $(window).scrollTop() < 250

一个工作示例：http://jsfiddle.net/9xDxE/。

在没有滚动条的情况下显示页面时，您需要决定该怎么做。

Answer 2

您可以使用scroll事件处理程序来显示或隐藏fixed位置div：

<强>的jQuery

$(document).scroll(function() {
    if ($(document).height() - $(window).height() - $(window).scrollTop() < 250) {
        $("#bar").fadeIn();
    } else {
        $("#bar").fadeOut();
    }
});

<强> CSS

#bar
{
    display: none;
    position: fixed;
    bottom: 0px;
    background: black;
    height: 50px;
    width: 100%;
}

点击here查看工作示例

当我从底部250px（为了论据）时，如何使页面上的条形图与底部对齐？

2 个答案: