Question

我已经绞尽脑汁待了几天，试图解决这个问题。我有一个使用一点jQuery的粘性标题：

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

然后，在我的标题中，我有一个使用媒体查询隐藏的移动菜单，直到最小宽度为750px。 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中，当它出现时，我已经设置了它，以便身体向右或向左移动，具体取决于菜单。

添加类的HTML看起来像这样。

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

      <header>

我不知道发生了什么事。如果固定位置在移动设备上中断，我已经查询了，但没有得到明确的答案;我尝试过使用z-index，这并不重要。我甚至尝试过绝对定位，除了背景颜色之外的其他所有内容＆＃34; div.page＆＃34;走到前面。那＆＃34;修复＆＃34;好一分钟，直到我向下滚动，标题打破，徽标位于顶部位置。

如果你想亲眼看看我在说什么，我的测试网站是： kevindenchdesign.com/playground/index.php 留在索引页面上，因为我正在努力修复首先是该页面上移动设备的问题。其他页面坏了，很多链接都运行得不好。所以继续检查索引页面。

我真的很感激这方面的任何帮助或建议，因为导航正常运行是一件好事。如果您无法弄清楚并且愿意分享代码，我也会对其他方式做菜单。

再次感谢，祝周末愉快。

Answer 1

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

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

等等。我会给你信任Alen，因为你的解决方案激励我去探索替代方案。如果我找到一个可以很好地降级的解决方案，但也许不是，那真是太好了。这是一项额外的工作，但我认为这很好。

Answer 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时，将不会应用上述样式，当它低于该值时，填充顶部将启动以使菜单始终可见！

希望这有帮助！

粘滞式标题重叠移动导航

2 个答案: