固定滚动顶部菜单不允许到达屏幕底部答案

【问题标题】：Fixed top menu on scroll doesn't allow to reach screen's bottom固定滚动顶部菜单不允许到达屏幕底部
【发布时间】：2016-02-20 08:42:29
【问题描述】：

我的固定顶部菜单有一个奇怪的行为。屏幕高度是动态的（取决于数据库检索的注册表数量）。当注册表的数量创建一个滚动条，但不足以覆盖所有菜单时，屏幕会反弹并且不允许我到达底部（无论如何滚动条都会再次向上跳跃）。

我可以在这里模拟行为：http://jsfiddle.net/thiagoprzy/0kkx9tsb/

我相信这个问题取决于我创建 JS 部分的方式，但是当我搜索替代解决方案时，几乎所有解决方案都与这个非常相似。

P.S：我的屏幕分辨率是 1650x1050，所以如果您的分辨率更小，可能需要更改 .container 高度值才能重现该问题。

【问题讨论】：

标签： javascript jquery html css fixed

【解决方案1】：

你需要使用$('.content').offset().top而不是$('.floating-filter').offset().top或者你可以使用

if ($(window).scrollTop() > $('.floating-filter').outerHeight(true)) {

所以你可以使用

$(window).scroll(function () {
    if ($(window).scrollTop() > $('.content').offset().top) {
        $('.floating-filter').addClass('fixed');
    } else {
        $('.floating-filter').removeClass('fixed');
    }
});

Working Demo

【讨论】：

感谢您的回答。不幸的是，这并不能解决问题，因为只有在滚动到达div.content 顶部后，菜单才会固定在顶部。我需要菜单顶部始终可见，即使菜单底部仍显示在屏幕中。
if ($(window).scrollTop() > $('.floating-filter').outerHeight(true)) { 成功了！谢谢！
呃哦...抱歉，@Mohamed-Yousef，但我又遇到了不同屏幕尺寸的问题 =/ 再次查看：jsfiddle.net/thiagoprzy/0kkx9tsb
@thiagoprzy 只需使用 $(window).on('scroll resize', function(){ 而不是 .scroll(
@thiagoprzy 你可以使用这样的东西jsfiddle.net/mohamedyousef1980/0kkx9tsb/13 ..这段代码的意思是..如果窗口宽度jsfiddle.net/mohamedyousef1980/0kkx9tsb/14

【解决方案2】：

所以，这就是我的解决方案：http://jsfiddle.net/thiagoprzy/0kkx9tsb/15/

基本上我放弃了position: fixed 并使用了position: absolute。然后，我将菜单放入带有position: relative 的包装器中，并在$(document).ready() 中将包装器的高度设置为与菜单相同。最后，我根据$(window).scroll() 事件中的$(window).scrollTop() 位置更新菜单的top 值。也许这不是最干净的解决方案，但它解决了我的问题，现在我很高兴。 =)

【讨论】：