Question

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

我能够模拟这里的行为：http://jsfiddle.net/thiagoprzy/0kkx9tsb/

我认为问题依赖于我创建JS部分的方式，但是当我搜索替代解决方案时，几乎所有解决方案都非常类似于此。

P.S：我的屏幕分辨率为1650x1050，因此如果您的分辨率较低，可能需要更改.container高度值才能重现此问题。

Answer 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

Answer 2

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

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

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

2 个答案: