html - Bootstrap 导航栏粘滞
问题描述
我想在包含背景图像的 div 中放置一个导航栏(Bootstrap 4)。当用户向下滚动时,导航栏应该贴在顶部,调整大小并更改其颜色。如果我将它放在 div 中,它会保持粘性,直到 bg-img 滚动出视图。当导航栏位于此 div 上方时,它可以工作。这是要播放的代码:https ://www.codeply.com/go/WbswGGulCf
谢谢!
编辑:这是代码:HTML:
<div class="top flex-center position-ref">
<div class="top-right links">
<a href="#">Kontakt</a>
<a href="#">Login</a>
</div>
</div>
<div class="container-fluid">
<span class="position-absolute trigger"></span>
<nav class="navbar navbar-expand-lg navbar-light sticky-top">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link3</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link4</a>
</li>
</ul>
</div>
</nav>
<div class="bgimg">
<div class="flex-center content full-height">
<div class="title">
Lorem ipsum dolor sit amet
</div>
</div>
</div>
<div class="row">
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suscipit adipiscing bibendum est ultricies integer quis auctor elit sed. Leo a diam sollicitudin tempor id eu. Tellus at urna condimentum mattis. Nunc mattis enim ut tellus. Feugiat vivamus at augue eget arcu dictum. Mi proin sed libero enim sed faucibus turpis in. Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Mauris rhoncus aenean vel elit. Mi bibendum neque egestas congue quisque egestas diam. Convallis posuere morbi leo urna. Aliquam sem fringilla ut morbi tincidunt. Mattis molestie a iaculis at. Felis donec et odio pellentesque diam volutpat commodo sed.
A arcu cursus vitae congue mauris rhoncus aenean vel elit. Velit egestas dui id ornare arcu odio. Tincidunt nunc pulvinar sapien et. Sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Mauris rhoncus aenean vel elit scelerisque mauris. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Neque convallis a cras semper auctor neque. Quam id leo in vitae turpis massa sed elementum tempus. Sit amet purus gravida quis blandit turpis. Quisque id diam vel quam elementum pulvinar etiam non. Ultricies mi eget mauris pharetra et ultrices neque. Turpis in eu mi bibendum neque egestas congue quisque egestas. Ipsum consequat nisl vel pretium lectus quam id leo in. Massa placerat duis ultricies lacus sed turpis.</p>
</div>
</div>
</div>
Javascript:
(new IntersectionObserver(function(e,o){
if (e[0].intersectionRatio > 0){
document.documentElement.removeAttribute('class');
} else {
document.documentElement.setAttribute('class','stuck');
}
})).observe(document.querySelector('.trigger'));
CSS:
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top {
background-color: #fff;
height: 60px;
}
.sticky-top {
transition: all 0.25s ease-in;
}
.stuck .sticky-top {
background-color: #326f8d !important;
padding-top: 3px !important;
padding-bottom: 3px !important;
margin-left: -1vw;
margin-right: -1vw;
}
.bgimg {
text-align: center;
background-image: url(https://placeimg.com/1000/480/animals);
background-attachment: fixed;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-size: cover;
margin-left: -1vw;
margin-right: -1vw;
/* height: calc(100% - 60px); */
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.links > a {
color: #433b3b;
padding: 0 25px;
font-size: 12px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.content {
height: 280px;
color: #fff;
}
解决方案
当您应用position: sticky
到元素时,它只会保持固定,直到它到达其父元素内容的末尾。因此,当图像结束时,您的导航会向上移动。并在您的情况下position: sticky
应用于 class sticky-top
。position:fixed
在将导航放置在包含背景图像的 div 内时,用于停止该操作。
推荐阅读
- c - 为什么我在 C 中面临条件问题?
- iis - IIS - 不通过 Internet 提供我的 JS 和 CSS 文件
- java - 无法从我作为库导入的项目中访问类文件
- java - 基于payload的Spring Cloud动态路由
- discord.js - 如何获取机器人所在的每个公会中所有成员的成员数
- datetime - 在日历中选择日期并在 tkinter 上更改其格式
- python - 检查所有唯一条目的最小值
- sql - 如果小于配置的参数,Oracle SQL 分配
- spring-boot - AWS Lambda 中的 DTO 验证
- javascript - 从用户控件运行时,asp modal 弹出窗口会立即关闭