Javascript 卷轴上的固定顶部菜单不'；不允许到达屏幕'；水底

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

我可以在这里模拟这种行为：

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

注：我的屏幕分辨率是1650x1050，因此如果分辨率更小，可能需要更改

.container

高度值以重现问题。

您需要使用

$（'.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');
    }
});

所以你可以用

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');
    }
});

因此，这就是我的解决方案：

---

基本上，我放弃了

position:fixed

，而使用了

position:absolute

。然后，我将菜单放在一个带有

位置：relative

的包装中，在

$（document）.ready（）

中，我将包装的高度设置为与菜单相同。最后，我根据

$（窗口）更新菜单的
top
值。也许这不是最干净的解决方案，但它解决了我的问题，现在我很高兴
 谢谢你的回答。不幸的是，这并不能解决问题，因为只有在滚动到达
div.content
顶部后，菜单才会固定在顶部。我需要菜单的顶部始终可见，即使菜单的底部仍在屏幕中显示。
if（$（窗口）.scrollTop（）>$（'.floating filter'）.outerHeight（true））{
成功了！谢谢！哦……对不起，@Mohamed Yousef，但我再次遇到了屏幕大小不同的问题=/再次检查此处：@thiagoprzy只需使用$（window）.on（'scroll resize'，function（）{而不是.scroll（@thiagoprzy您可以使用类似的东西..此代码的意思是..如果窗口宽度<400，它将添加固定到div的cladd，直到滚动…但是如果您希望在调整大小时取消绑定滚动，并使div始终固定在小屏幕中