当我在导航栏上隐藏元素时，如何修复导航栏中剩余元素发生的 "jump"？

Question

我正在尝试用我的导航栏中的 h5 元素解决一个小的跳转问题，我正在使用 bootstrap4 和 jQuery。

发生的事情是，在我的导航栏中，我有一个图标，一个 "h5" 和一个 "p" 元素按此顺序彼此重叠，其中 4 个在另一个旁边，当向下滚动页面我只想保留 "h5".

我使用 js 隐藏和显示方法做到了这一点，但是当它们完成隐藏并且显示设置为 "none" 我的 "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" 在用户向下滚动时顺利消失。

Answer 1

你的方向是正确的。这完全取决于“顺利”对您的项目意味着什么。

更简单易行的解决方案是从 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 元素将占据屏幕的 space，除非它们具有 display: none 或 position: absolute or fixed 属性。这意味着他们正在使用的 space 在完全消失之前不会“可用”。这就是为什么您的 <h5> 仅在隐藏元素的时间结束后才会“跳转”。将该时间更改为 0（或简单地删除它）将使“跳跃”对用户“不可见”，因为您删除了该延迟。

关于 #mainNavbar 从 0.8s 到 0.4s 的过渡，这只是为了帮助您立即隐藏图像和 <p>.

同样，这将取决于您需要您的项目有多“流畅”，但我认为按照其他网站的标准，该配置具有良好的视觉效果。

如果您需要图像和 <p> 慢慢消失，那么您将需要手动更改 <h5> 的位置（如您所知）。您可以将 transition 属性添加到 <h5> CSS 或使用 timeOut 将 <h5> 移动到图像和 <p> 不见了。

更新

如果需要慢慢隐藏图标和<p>，最好的解决办法大概是全部设置成position: fixed，这样就不会互相占用对方的space.

总之，您的 <a> 或 .nav-link 需要 position: relative 和所有 children（图标，<h5> 和 <p> ) 会有一个 position: fixed。然后，您可以使用 javascript 函数更改 <h5> top 属性。

请注意，您需要重新对齐，找到正确的 top 和 left 属性，现在位置已更改:(

这是一个工作示例： https://codepen.io/brunomont/pen/XQoZrL

当我在导航栏上隐藏元素时，如何修复导航栏中剩余元素发生的 "jump"？

How to fix the "jump" that happens with the remaining elements in a navbar when I hide elements on the navbar?

css

jquery

element

hide

bootstrap-4

更新