Question

我正在为即将到来的婚礼建立一个网站，我想要一个粘性的标题，但出于某种原因，它已经消失了＃34;在你走向某个页面后向上移动。我的测试网址是：https://betterradiotech.com。这是导航标记：

<!-- Start Nav -->
<header>
    <nav>
        <ul class="nav-list">
            <li><a href="/" title="Home">Home</a></li>
            <li><a href="/music/" title="Music">Music</a></li>
            <li><a href="/gallery/" title="Gallery">Gallery</a></li>
            <li><a href="/feed/" title="Feed">Feed</a></li>
        </ul>
    </nav>
</header> <!--/ End Nav -->

这是导航SCSS：

header {
    padding: 1em;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background-color: $burgandy;
}
.nav-list {
    display: flex;
    flex-flow: row nowrap;
    li {
        list-style-type: none;
        margin-left: 10px;
    }
    a {
        color: $pink;
        font-weight: 600;
    }
}
.active-nav {color: $navy !important;}

导航中没有JavaScript，除了使主动导航工作...为了完整起见，我也将包括：

switch(location.pathname) {
    case "/":
        document.querySelector("a[title*='Home']").classList.add("active-nav");
    break;
    case "/admin/":
        document.querySelector("a[title*='Admin']").classList.add("active-nav");
    break;
    case "/feed/":
        document.querySelector("a[title*='Feed']").classList.add("active-nav");
    break;
    case "/gallery/":
        document.querySelector("a[title*='Gallery']").classList.add("active-nav");
    break;
    case "/music/":
        document.querySelector("a[title*='Music']").classList.add("active-nav");
    break;
}

为什么我的导航栏在页面下一定距离后消失了？它似乎发生在第一部分的完整背景图片结束之前。

Answer 1

我认为您可以通过从sticky切换到fixed来获得所需的行为。 Sticky is sort of a hybrid of fixed and relative positioning，并相对于上下文更改其行为，通常用于允许项目通过滚动位置响应其邻居。

粘性定位可以被认为是相对定位和固定定位的混合。粘性定位的元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定直到它到达其父母的边界。

所以你想要：

header {
    position: fixed;
}

PS：它为你消失的原因是你的身体有一个计算的身高，但身体的内容超出了那个高度。滚动经过身体的计算高度（即标题的父级）后，粘性元素会滚动。

在页面上走了一段路后，粘性标题消失了

1 个答案: