Question

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

示例：

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

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

在高大的网页上运行：scroll(over 50px) > add class
在高度较小的网页上运行：scroll(over 50px) > add class > remove class

请参阅此示例：http://jsfiddle.net/F4BmP/2930/

Answer 1

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

好吧，即使屏幕尺寸不同，此代码也会在我的菜单栏上运行。

Answer 2

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

但是你的功能是正确的。没有太多的内容，用户可以看到当前屏幕本身的菜单。如果有更多内容，用户可以滚动并始终将粘性菜单放在最上面。

如果您真的想要浏览器滚动，可以为容器提供min-height。

实施例

.containerclassname{
  min-height: 1500px;
}

Answer 3

我在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");
                    }
                });
             });

整个代码都包含在一个小提琴中。

Link to fiddle

亲切的问候。

亚历山大

Answer 4

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

原因使问题是当文件从静态更改为固定时HTML文件丢失高度。说明：浏览器有500px并且有一个滚动条，当用户滚动我的菜单更改为固定并且浏览器丢失50px的菜单时，浏览器没有足够的高度到有滚动条，它将返回首页并在ELSE语句中执行代码行。

所以我添加了一个div包装我的菜单，并使用我的菜单设置高度相同的高度，这将使滚动前后文档的高度始终相同：

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

此解决方案解决了我的问题。

菜单上的问题固定顶部滚动，当html文件没有足够的高度？

4 个答案: