我正在尝试用我的导航栏中的 h5 元素解决一个小的跳转问题,我正在使用 bootstrap4 和 jQuery。
发生的事情是,在我的导航栏中,我有一个图标,一个“h5”和一个“p”元素按此顺序在彼此之上,其中 4 个在另一个旁边,当向下滚动页面时我想要只保留“h5”。
我用 js 隐藏和显示方法做到了这一点,但是当它们完成隐藏并且显示设置为“无”时,我的“h5”跳了一点以占据导航栏的中心。
我想要一个解决最后那个小跳跃的方法。
我已经尝试过不透明度、可见性、高度 = 0 e 等的过渡……它们有点工作,但我需要再次手动调整 h5 位置,我想知道是否有更简单的解决方案.
<!--NAVBAR-->
<nav id="mainNavbar" class="navbar navbar-expand-sm navbar-dark fixed-top" >
<a class="navbar-brand px-5" href="#home"><i class="fas fa-spa"></i></a>
<ul class="navbar-nav w-100 justify-content-around">
<li class="nav-item"><a class="nav-link" href="#home">
<figure><i class="fas fa-fire-alt"></i><figcaption><h5>Home</h5><p>Informacoes gerais</p></figcaption></figure></a></li>
<li class="nav-item"><a class="nav-link" href="#info">
<figure><i class="fab fa-envira"></i><figcaption><h5>Info</h5><p>Informacoes gerais</p></figcaption></figure></a></li>
<li class="nav-item"><a class="nav-link" href="#servicos">
<figure><i class="far fa-compass"></i><figcaption><h5>Servicos</h5><p>Informacoes gerais</p></figcaption></figure></a></li>
<li class="nav-item"><a class="nav-link" href="#contato">
<figure><i class="far fa-envelope"></i><figcaption><h5>Contato</h5><p>Informacoes gerais</p></figcaption></figure></a></li>
<li class="nav-item"><a class="nav-link" href="#ajuda">
<figure><i class="fas fa-child"></i><figcaption><h5>Ajuda</h5><p>Informacoes gerais</p></figcaption></figure></a></li>
</ul>
</nav>
<!--NAVBAR-->
<div class="container">Lorem1000</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$.noConflict();
$(document).ready(function($){
$(document).scroll(function(){
if ($(document).scrollTop() > $("#mainNavbar").height()) {
$("figure i").hide(500);
$("figure p").hide(500);
$("nav").css("height", "50px");
}
else {
$("figure i").show(500);
$("figure p").show(500);
$("nav").css("height", "128px");
};
});
});
</script>
CSS
body {
position: relative;
box-sizing: border-box;
background-color: rgb(65, 61, 61);
}
nav {
background-color: dimgray;
}
#mainNavbar {
padding-bottom: 0;
transition: all 0.7s ease;
}
.navbar-brand {
color:white;
}
.navbar-brand .active {
color: red;
}
.navbar-nav .nav-item .nav-link{
color: white;
text-align: center;
width: 100px;
padding-bottom: 0;
transition: all 0.8s ease;
}
.navbar-nav .nav-item .active {
color: rgb(223, 5, 5) !important;
}
}
我想要的只是让图标和“p”在用户向下滚动时顺利消失。
最佳答案
您的方向是正确的。这完全取决于“顺利”对您的元素意味着什么。
更简单易行的解决方案是从 hide
中删除过渡时间和 show
函数,像这样:
if ($(document).scrollTop() > $("#mainNavbar").height()) {
$("figure i").hide();
$("figure p").hide();
$("nav").css("height", "50px");
}
else {
$("figure i").show();
$("figure p").show();
$("nav").css("height", "128px");
};
我还建议更改 #mainNavbar
的过渡时间0.4s 而不是 0.8s
原因是:
HTML 元素将占据屏幕空间,除非它们有 display: none
。或 position: absolute or fixed
属性(property)。这意味着他们正在使用的空间在他们完全消失之前不会“可用”。这就是为什么你的 <h5>
只有在隐藏元素的时间结束后才会“跳跃”。将该时间更改为 0(或简单地删除它)将使“跳跃”对用户“不可见”,因为您删除了该延迟。
关于 #mainNavbar
从 0.8s 过渡到 0.4s,这只是为了帮助您立即隐藏图像和 <p>
.
同样,这将取决于您需要您的元素有多“流畅”,但我认为按照其他网站的标准,该配置具有良好的视觉效果。
如果您需要图像和 <p>
慢慢消失,然后你需要手动改变你的<h5>
的位置(就像你已经知道的那样)。您可以包括 transition
属性(property)给<h5>
CSS 或使用 timeOut
移动你的<h5>
在图像和 <p>
之后都走了。
更新
如果需要慢慢隐藏图标和<p>
, 最好的解决方案可能是用 position: fixed
设置所有内容, 所以没有东西会占用彼此的空间。
总而言之,您的 <a>
或 .nav-link
需要 position: relative
所有的 child (图标,<h5>
和 <p>
)都会有一个 position: fixed
.然后,您可以使用已有的 javascript 函数来更改 <h5>
top
属性。
请注意,您需要重新对齐,找到正确的 top
和 left
属性,现在位置改变了:(
这是一个工作示例: https://codepen.io/brunomont/pen/XQoZrL
关于jquery - 当我在导航栏上隐藏元素时,如何修复导航栏中剩余元素发生的 "jump"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55858645/