滚动上的固定顶级菜单不允许触及屏幕底部

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

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

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

P.S：我的屏幕分辨率是1650x1050，所以如果您的分辨率较低，也许您需要更改高度值以重现问题。

来源

2015-11-18 thiagoprzy

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

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

来源

2015-11-21 01:03:41 thiagoprzy

你需要使用$('.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

来源

2015-11-18 14:45:59

感谢您的回答。不幸的是，这并不能解决问题，因为只有在滚动到达'div.content'顶部后，菜单才会固定在顶部。即使菜单底部仍在屏幕上显示，我仍然需要始终可见的菜单顶部。 – thiagoprzy

'if（$（window）.scrollTop（）> $（'。floating-filter'）。outerHeight（true））{'做了诡计！谢谢！ – thiagoprzy

@thiagoprzy很高兴帮助..祝你好运:) –

滚动上的固定顶级菜单不允许触及屏幕底部

回答

相关问题