Jquery 粘性标题与移动导航重叠_Jquery_Mobile_Sass

Jquery 粘性标题与移动导航重叠

jquery mobile sass

Jquery 粘性标题与移动导航重叠,jquery,mobile,sass,Jquery,Mobile,Sass,为了解决这个问题，我绞尽脑汁想了几天。我有一个使用jQuery的粘性标题： <script> $(window).scroll(function() { if ($(this).scrollTop() > 1){ $('header').addClass("sticky"); } else{ $('header').removeClass("sticky"); } }); &

为了解决这个问题，我绞尽脑汁想了几天。我有一个使用jQuery的粘性标题：

<script>
    $(window).scroll(function() {
    if ($(this).scrollTop() > 1){  
        $('header').addClass("sticky");
       }
       else{
         $('header').removeClass("sticky");
       }
    });
</script>

现在，（终于）开门见山了。它可以在桌面上完美运行，完全符合我的要求：

然后，每当我进入移动设备：标题与菜单重叠，看起来很糟糕

菜单的工作方式：我正在使用jQuery向body添加一个类，当它添加时，我对它进行了样式化，以便body根据菜单左右移动

添加类的HTML如下所示

<body class="" id="home">
    <div class="page">

      <header>

我不知道发生了什么事。我查过手机上的固定位置是否中断，但没有得到明确的答案；我试过使用z-index，这没关系。我甚至试着绝对定位它，除了“div.page”上的背景色之外，所有的东西都在前面。那个“修复”看起来很好，有一分钟，直到我向下滚动，标题断了，徽标出现在顶部位置

如果你想亲眼看看我说的是什么，我的测试站点是：kevindenchdesign.com/playery/index.php停留在索引页面上，因为我正在尝试首先解决该页面上的移动问题。其他页面被破坏了，很多链接工作得不太好。因此，请继续检查索引页

我真的很感谢任何关于这一点的帮助或建议，因为有一个移动导航正常工作是一件好事。如果你不明白，并且愿意分享代码的话，我也愿意用其他方法来做菜单

再次感谢您，祝您周末愉快。

一个简单的修复方法是像这样在类辅助导航包装器的顶部添加填充

编辑：只使用您正在使用的@media（），这样在桌面视图中就不会有任何问题

@media (max-width: 750px) {      // Your breakpoint
    .secondary-nav-wrapper ul{
       padding-top: 80px;        //This would be the height of you sticky navbar
    }
}

这样粘性导航栏就不会与右侧的辅助导航重叠

当浏览器窗口超过750px时，将不会应用上述样式，当其下降到低于750px时，填充顶部将启动，使菜单始终可见

希望这有帮助

我发现是

position:fixed

导致了问题，由于没有

position:fixed

我无法找到可行的粘性收割台解决方案，因此我只定位收割台本身：

body.shift-right {
    div.page {
        header {
            position:fixed;
            top: 0;
            left: 345px;
        }
    }
}

等等。我相信阿伦，因为你的解决方案激发了我去探索其他选择。如果我能找到一个能很好地降低性能的解决方案，那就太好了，但也许不能。这是一个额外的工作，但我想这很好。

谢谢，我会把它当作一个备选方案。在我的脑海里，我喜欢菜单看起来像是从两边掉下来的。我唯一不同意的是：我如何纠正桌面版和移动版之间的功能差异？这次我完全不理解你的担忧。我更新了我的答案，进一步解释了如何只对小于750px的手机进行快速修复。并不是所有的移动浏览器都有相同的html和css标准，所以你必须小心使用不同的设备进行测试！这不是一个完美解决方案的唯一方法是，在移动设备上，身体会向左滑动，而头部保持静止。简单地添加边距或填充使解决方案看起来有点杂乱无章，因为除了页眉以外的所有内容都在移动。如果我有足够的声望点数，我会投赞成票，但我认为这并不能完全解决我的问题。你还有其他想法吗？你可以使用snap.js将整个身体向左或向右移动！它需要更多的编码和一点javascript，但它工作得很好！我删除了我对该建议的评论，请随意跟随-然后我可以删除该评论以结束循环。确保检查该职位的行为：固定；在Windows Phone、Android和iOS浏览器中。它并非总是表现出应有的行为。不要为任何版本的迷你歌剧而烦恼！

@media (max-width: 750px) {      // Your breakpoint
    .secondary-nav-wrapper ul{
       padding-top: 80px;        //This would be the height of you sticky navbar
    }
}

body.shift-right {
    div.page {
        header {
            position:fixed;
            top: 0;
            left: 345px;
        }
    }
}