Javascript 从页面底部开始，向上滚动然后粘到顶部的条

我试图重现我心中的一个想法。它会在一个长长的滚动页面中

导航栏将从初始屏幕的底部开始。一旦你开始向下滚动，它就会以相同的节奏向上滚动，但一旦到达顶部，它就会保持不变。如果你滚动回到顶部，它会回到原来的位置

它是这样的：当你滚动时，它保持固定在同一个数字标记上，然后粘到顶部，除非你向上滚动到该数字

示例代码：

$（文档）.on（“就绪”，函数（）{
sortTheFooterOut（）；
});
函数sortTheFooterOut（）{
页脚=$（“#页脚”）；
$（窗口）.on（“滚动”，函数（）{
如果（$（窗口）.scrollTop（）>0）{
如果（！footer.hasClass（“已修复”））{
footer.fadeOut（250，函数（）{
footer.addClass（“固定”）.fadeIn（250）；
});
}
}否则{
footer.fadeOut（250，函数（）{
footer.removeClass（“固定”）.fadeIn（250）；
});
}
});
}

正文{
字体系列：“Segoe UI”、“DejaVu Sans”、“Trebuchet MS”、Verdana、Sans serif；
}
h1{
字体系列：“Segoe UI Light”、“Segoe UI”、“DejaVu Sans”、“投石机MS”、Verdana、Sans serif；
颜色：#999；
字体大小：正常；
保证金：0；
}
页脚{
背景：#008aca；
填充：10px；
位置：绝对位置；
底部：0；
左：0；
右：0；
}
.固定{
位置：固定；
排名：0；
底部：自动；
}

页脚滚动
1.

二,

三,

四,

五,

六,

七,

八,

九,

十,

十一,

十二,

十三,

十四,

十五

十六,

十七,

十八

十九,

二十

二十一,

二十二

二十三

二十四

二十五

二十六

二十七

二十八

二十九

三十

三十一

三十二

三十三

三十四

三十五

三十六

37

三十八

三十九

四十


页脚

我想是这样的吧

添加了一个检查，以在用户在页面上具有缓存滚动位置时正确应用该类。尤其是Opera对此很固执——它在窗口onload事件之后重新定位，因此超时。还包括一些调整大小去抖动。对于组合事件，超时时间比单独加载所需的绝对时间稍长

---

在我试图解决rockmandew在评论中提到的内容重叠的问题之前，需要更多关于确切文档结构的信息。我不想在那里浪费时间。。。或者在脚本编写上做得过火。

到底什么不起作用？@RikenShah-我同意你的看法。。。OP在问什么？他似乎用……回答了自己的问题。。。他自己的问题…@RikenShah-一个朋友为我澄清了这一点，显然，他只是想要相反的效果。他希望菜单不是从顶部开始，而是从底部开始，在你向下滚动时翻转到顶部。@rockmandew确实，如果不清楚，很抱歉。这个解决方案在一定程度上是有效的，因为你已经成功地解决了问题并提供了适当的回答。我认为这个解决方案并不理想，因为它总是覆盖一些列表项（即，我永远看不到13和14）。我想这不是你想要的。我明白你的意思，让我试着解决这个问题。另一个需要的调整是在页面加载时检查缓存的滚动位置并应用适当的类；我很想知道你是如何处理这两个问题的-主要是缓存的滚动位置：p-如果你需要一双额外的眼睛，请告诉我。我想我已经准备好了一些缓存位置的代码：。另一个问题似乎更难解决，可能需要的不仅仅是脚本…哇@Shikkediel正在回答未来的问题，甚至在他们被问到之前：干得好，我会看看我是否能通过一些测试。至于另一个问题，我同意，我认为这比我们希望的要棘手一点。此外，我认为解决方案将取决于开发人员希望它如何工作——因为您可以做很多事情。

$(function() {

var gate = $(window),
footer = $('#footer'),
space;

gate.on('load resize', function() {

    clearTimeout(redraw);

    var redraw = setTimeout(function() {
    space = gate.height()-footer.outerHeight();
    sortTheFooterOut();
    }, 150);
})
.scroll(sortTheFooterOut);

function sortTheFooterOut() {

    var current = gate.scrollTop(),
    stuck = footer.hasClass('fixed');       

    if (current > space) {
    if (!stuck) {
    footer.addClass('fixed');
    }
    }
    else if (stuck) footer.removeClass('fixed');
}
});