使用Bootstrap提高隐藏Navbar的转换速度延迟
使用Bootstrap提高隐藏Navbar的转换速度延迟
提问于 2022-10-27 11:49:35
我是新的HTML，CSS和JS。我正在制作一个使用Bootstra-5的主页。我已经在我的页面中实现了导航条。问题是，当我向下滚动时，导航条隐藏得太快了。我想增加隐藏导航杆的延迟时间。请告诉我如何为导航栏设置自定义的转换速度？我正在使用引导类的导航栏。
.spacer {
height: 125vh;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<nav class="navbar navbar-hide-on-scroll navbar-expand-lg navbar-light bg-light ">
<div class="container-fluid">
<a class="navbar-brand ps-5 fs-4" href="#">Abdullah Asif</a>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 pe-5 fw-bold fs-4">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Work</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">About</a></li>
</ul>
</div>
</nav>
<div class="spacer"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
回答 1
Stack Overflow用户
发布于 2022-10-27 11:58:43
可以向nav元素添加其他类，例如autohide。然后，在您的CSS中，您需要针对这个类并添加如下的过渡持续时间属性：
.autohide {
transition-duration: 4s;
}还可以通过针对nav元素本身，将其应用于站点上的所有nav元素：
nav {
transition-duration: 4s;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74221574
复制相关文章
相似问题
腾讯云开发者
