粘性标题在页面向下移动一定距离后消失
我正在为即将举行的婚礼建立一个网站，我想要一个粘性标题，但由于某种原因，当您在页面下方移动一定距离后，它会通过向上移动而“消失”。我的测试网址是这样的： 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;
}
为什么我的导航栏在页面下方一定距离后消失？它似乎发生在第一部分完整背景图片结束之前。
iFr*_*cht 19
原因可能是您的包含元素没有您想象的那么高，并且您可能必须显式将该元素设置height为fit-content，因为sticky元素不能离开其父级！
在大多数情况下，最简单的解决方案是将此规则添加到 CSS 中：
body {
height: fit-content;
}
但一般来说，您需要哪种解决方案以及必须将其应用到哪个元素取决于您的文档结构。假设它看起来像这样：
<body>
<header>
<nav>
<!-- Your navigation -->
</nav>
</header>
<main>
<!-- The main content of the site -->
</main>
</body>
您可能会使用一些 CSS 重置，其中包含如下规则：
html, body {
height: 100%;
}
这允许在页面上使用百分比高度，但它会破坏粘性标题，而无需额外的工作。
当您使用开发工具查看主体的大小时，一切看起来都不错：
但当你向下滚动时，你会发现一个问题：
它body与您的视口一样高。您看到的所有其他内容都只是从其中溢出。但粘性标题不能做到这一点，它会留在其中body并随之消失。我们现在有三个潜在的解决方案：
如果您的页面不需要基于百分比的高度，则可以使用以下 CSS 规则：
body {
height: fit-content;
}
如果有一些基于百分比的高度，请尝试将其替换vh为，然后看看这是否适合您。然后您可以应用上面的修复程序。
如果您确实需要基于百分比的高度，那么您可能希望使正文保持在原位，但滚动溢出的内容：
html {
overflow: hidden;
}
body {
overflow: scroll;
}
sticky我认为您可以通过从 切换到 来获得所需的行为fixed。粘性是固定定位和相对定位的混合体，并改变其相对于上下文的行为，并且通常用于允许项目通过滚动位置响应其邻居。
粘性定位可以被认为是相对定位和固定定位的混合体。粘性定位的元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定，直到它到达其父级的边界。
所以你要：
header {
position: fixed;
}
PS：它对你来说消失的原因是你的身体有一个计算的高度，但身体的内容超出了这个高度。一旦滚动超过正文（标题的父级）的计算高度，粘性元素就会滚动消失。
| 归档时间： |
|
| 查看次数： |
11921 次 |
| 最近记录： |