Javascript 当html文档没有足够的高度时，菜单固定在滚动条顶部有问题吗？

我做了一个菜单固定顶部滚动时，它可以与一些页面有很大的高度，但在页面没有足够的高度，这个脚本循环：

示例：

我有一个高度为50px的菜单，我写了一个脚本：

if ($(this).scrollTop() > 50){
    // add class fixed
} else { //remove class }

• 在高度较大的页面上，此运行：

  滚动（超过50px）>添加类

• 在高度较小的页面上，此运行：

  滚动（超过50px）>添加类>删除类

请参见此示例：

使用此javascript：

$(document).ready(function(){
var elementPosition = $('.menu').offset();

$(window).scroll(function(){
        if($(window).scrollTop() > elementPosition.top){
              $('.menu').css('position','fixed').css('top','0');
              $('.menu').css('width','100%');
              $('.menu').css('z-index','500');
        } else {
            $('.menu').css('position','static');
        }    
});
});

---

这段代码在我的菜单栏上运行，即使屏幕大小不同。

基本概念是用户在滚动页面时必须看到菜单

但在你的功能是正确的。没有太多的内容，用户可以看到当前屏幕本身的菜单。若有更多的内容，用户可以滚动并获得始终位于顶部的粘性菜单

如果您真的想让浏览器滚动，您可以为容器指定

min height

范例

.containerclassname{
  min-height: 1500px;
}

---

我在firefox和chrome上测试了你的代码，问题似乎出在chrome上。我重新编写了html和JS两种代码，在chrome中运行良好，在任何浏览器中都是如此

以下是可能对您有效的方法：

 $(document).ready(function(){
             $(window).scroll(function (e) {
                    $el = $('.nav');
                    if ($(this).scrollTop() > 100) {
                        $('.nav').addClass("fixedNav");
                    }else {
                        $('.nav').removeClass("fixedNav");
                    }
                });
             });

整个代码都包含在一把小提琴里

亲切的问候

---

亚历山大

最后，我找到了解决问题的方法

产生问题的原因是，当菜单从静态变为固定时，HTML文档失去了高度。示例：浏览器有500px和一个滚动条，当用户将“我的菜单”变为固定时，浏览器失去了50px的菜单，所以浏览器没有足够的高度来拥有滚动条，它将返回到首页并在ELSE语句中执行代码行

因此，我添加了一个div wrap my menu，并将高度设置为与我的菜单相同的高度，这将使滚动前后的文档高度始终相同：

<div id="wrap" style="height:50px;width:100%">
      <div id="mymenu"></div>
</div>

---

这个解决方案解决了我的问题。

@Nguyen huy所以你的意思是，你不仅要根据滚动位置添加一个类，还要根据窗口/屏幕大小添加或删除一个类？是的，我的意思是，如果窗口/屏幕大小有问题，你可以试试examble，当你在最后滚动时，它会自动跳转到顶部，所以它做了一个循环添加和删除类所以，这个代码不适合我的情况，当浏览器没有足够的高度时，当你在最后滚动时，它会自动跳到顶部。你可以试试我的示例，在滚动的最后无法够到Baroh我明白了，当我看到你的示例时，你的示例中没有任何错误，但是当我将
删除到4
中时，（底部！）没有出现，这是你的意思吗？是的，我的意思是。我知道产生问题的原因，因为当设置菜单固定时，文档丢失了与菜单相同的高度，所以浏览器的滚动条消失，滚动条减少，跳转到Else语句，但我不知道如何解决这个问题。对不起，我被你的问题弄糊涂了。无论如何，我的英语很差。：）好吧，如果你的问题是（底部！）没有出现，那是因为你将菜单类的位置设置为绝对，当高度不够时（你的“底部！”在菜单后面），它会使菜单覆盖（底部！），而滚动条也不会出现，为了使你的（底部！）在高度不够时仍然出现，你需要设置（底部！）位置：固定，底部：0。我将在下周一尝试您的代码，并尽快回复您。此代码不适用于我，因为它仍然无法解决菜单添加类固定时的问题，有时调整大小或屏幕分辨率时屏幕高度不够，当菜单固定时，文档丢失菜单高度并使浏览器丢失滚动条，这将运行else语句immediately@NguyễnHuy，matbe这可能会有帮助：我已经找到了解决问题的方法，它在IE 8+、chrome和firefox上运行得很好，我已经更新了上面的答案，但无论如何，非常感谢你。这并不能解决我的问题，因为它会在我的网页上留下空白。这是一个很好的解决方案。只是一点小小的改进：菜单的高度可以改变（动态内容或响应式网站）因此，我在添加类

fixedNav

之前在JS中设置了wrap div的高度，并在删除类时将其删除。