粘性标题与移动导航重叠答案

【问题标题】：Sticky Header Overlaps Mobile Navigation粘性标题与移动导航重叠
【发布时间】：2015-01-06 03:09:08
【问题描述】：

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

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

然后，在我的标题中，我使用媒体查询隐藏了移动菜单，直到最小宽度为 750 像素。 HTML 如下所示：

<div class="menu-button">
    <i class="fa fa-align-justify"></i>
    <span>Menu</span>
</div>

<div class="secondary-nav-wrapper">
    <nav role="navigation" class="responsive-nav">
        <ul>
            <li class="menu-title">
                Where to?
            </li>
            <li>
                <a href="index.php" class="home" title="Home">Home</a>
            </li>
            <li>
                <a href="contact/contact.php" class="contact" title="About and Contact">About</a>
            </li>
            <li>
                <a href="portfolio.php" class="portfolio" title="Portfolio">Portfolio</a>
            </li>
        </ul>
    </nav>
</div>

我一直在为我的 CSS 使用 SASS，它看起来像这样：

    body.shift-left {
    background-color: $softblack;

    div.page {
        @include transition(all 0.25s ease 0s);
    left: -345px;
    position: relative;
    top: 0;

        header {
            div.secondary-nav-wrapper {
        display: block;
        position: fixed;
        right: 12px;
        top: 8px;
        width: 324px;

                nav.responsive-nav {
                    display: block;

                    ul {
                        padding: 0;
                        margin: 0;
                        line-height: 46px;

                        li.menu-title {
                            font-family: $font-primary;
                            color: white;
                            font-size: 2em;
              background-color: $blackgrey;
              padding: 5px 5px 5px 15px;
                        }
                        li {
                            font-family: $font-default;
                            color: $lightgrey;
                            font-size: 1.5em;

                            a {
                                display: block;
                            }
                        }
                        hr {
                             border: 0;
                             height: 1px; 
                             background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
                             background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
                             background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
                             background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
                        }
                    }
                }
            }
        }
    }
}

现在，（终于）进入正题。它在桌面上完美运行，正是我想要的样子：

Desktop version looks fine

然后每当我使用移动设备时：As you can see, 标题与菜单重叠，看起来很糟糕。

菜单的工作原理：我正在使用 jQuery 向 body 添加一个类，当它添加时，我设置了它的样式，以便 body 根据菜单向右或向左移动。

添加类的 HTML 如下所示。

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

      <header>

我不知道发生了什么。如果固定位置在手机上中断，我已经查找过，但没有收到明确的答案；我尝试过使用 z-index 但这没关系。我什至尝试过绝对定位它，除了“div.page”上的背景颜色之外的所有东西都放在前面。那个“修复”一分钟看起来还不错，直到我向下滚动并且标题坏了并且徽标出现在顶部位置。

如果您想亲自看看我在说什么，我的测试站点是：kevindenchdesign.com/playground/index.php 留在索引页面上，因为我正在尝试修复首先是该页面上的移动问题。其他页面已损坏，并且很多链接都无法正常工作。所以继续检查索引页面。

我非常感谢您对此提供的任何帮助或建议，因为让导航在移动设备上正常工作是一件好事。如果您无法弄清楚并愿意共享代码，我也愿意接受其他制作菜单的方式。

再次感谢，周末愉快。

【问题讨论】：

我删除了关于该建议的评论，请随时关注 - 然后我可以删除它以结束循环。

标签： jquery mobile sass

【解决方案1】：

我发现是 position: fixed 导致了问题，因为没有 position: fixed 我找不到可行的粘性标头解决方案，所以我只定位标头本身：

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

等等。我会赞扬 Alen，因为您的解决方案启发了我探索替代方案。如果我能找到一个很好地降级的解决方案，那就太好了，但也许不是。这是一个额外的工作，但我想这很好。

【讨论】：

一定要检查仓位的行为：fixed;在 Windows Phone、Android 和 iOS 浏览器中。它并不总是表现得像它应该的那样。不要为任何版本的 Opera mini 烦恼！

【解决方案2】：

一个简单的解决方法是像这样在二级导航包装器的类中添加一个填充顶部

编辑：仅使用您正在使用的@media()，因此在桌面视图中它没有任何问题

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

这样粘性导航栏不会与右侧的二级导航重叠！

当浏览器窗口超过 750px 时，上述样式将不会被应用，当它低于该样式时，padding-top 将启动以使菜单始终可见！

希望这会有所帮助！

【讨论】：

谢谢，我会考虑将其作为替代选项。在我的脑海中，我喜欢菜单看起来像是从两侧落下的想法。我唯一的争吵是：如何纠正桌面版和移动版之间的功能差异？
这次没完全理解你的顾虑。我更新了我的答案以进一步解释您如何只能对小于 750 像素的手机进行快速修复。并非所有的移动浏览器都具有相同的 html 和 css 标准，因此您必须小心并使用不同的设备进行测试！
它不是完美解决方案的唯一原因是，在移动设备上，正文将向左滑动，而标题保持静止。简单地添加边距或填充会使解决方案看起来有点拼凑，因为除了标题之外的所有内容都在移动。如果我有足够的声望点，我会投赞成票，但我认为它不能完全解决我的问题。您还有其他想法吗？
你可以使用 snap.js 将所有的身体一直向右或向左移动！它需要更多的编码和一点 javascript，但它工作得非常完美！ jakiestfu.github.io/Snap.js