固定顶部菜单滚动不允许到达屏幕的底部 [英] Fixed top menu on scroll doesn't allow to reach screen's bottom

问题描述

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

I have a strange behavior with my fixed top menu. The screen height is dynamic (depends on the number of registries retrived by the database). When the number of registries creates a scroll, but not high enough to cover up all the menu, the screen bounces and doesn't allow me to reach the bottom (the scroll jumps up again, no matter what).

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

I was able to simulate the behavior here: http://jsfiddle.net/thiagoprzy/0kkx9tsb/

我相信问题依赖于我创建JS部分的方式，但是当我搜索其他解决方案时，几乎所有的

I believe the issue relies on the way I created the JS part, but when I searched about alternative solutions, almost all of them were very very similar to this one.

PS：我的屏幕分辨率为1650x1050，因此如果您有更详细的解决方案，也许您需要更改<$ c

P.S: My screen resolution is 1650x1050, so if you have a tinier resolution, maybe you'll need to change the .container height value in order to reproduce the issue.

推荐答案

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

So, that's my solution: http://jsfiddle.net/thiagoprzy/0kkx9tsb/15/

基本上我放弃了 position：fixed 并使用了 position：absolute 。然后，我把菜单放在一个包含 position：relative 和 $（document）.ready（）我设置包装器的高度与菜单相同。最后，我根据 $（window）.scrollTop（）更新菜单的 top code> $（window）.scroll（）事件。也许这不是最干净的解决方案，但它解决了我的问题，现在我很高兴。 =）

Basically I gave up on position: fixed and used position: absolute. Then, I put the menu inside a wrapper with position: relative and, in $(document).ready() I set the wrapper's height the same as the menu. For last, I update the top value of the menu based on $(window).scrollTop() position inside $(window).scroll() event. Maybe it's not the most clean solution, but it solved my issue and now I'm happy. =)

这篇关于固定顶部菜单滚动不允许到达屏幕的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！