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

发生的是,在我的导航栏中,我有一个图标,一个图标“ h5”和一个“ p”元素依次排列,其中四个彼此相邻,当向下滚动页面时,我只想保留“ h5”。

我使用js hide和show方法来解决这个问题,但是当它们完成隐藏并且显示设置为“ 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”在用户向下滚动时平稳消失。

最佳答案

您的方向正确。这完全取决于“平滑”对您的项目的意义。

更简单易用的解决方案是从hideshow函数中删除过渡时间,如下所示:

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: noneposition: absolute or fixed属性,否则它们将占据屏幕的空白。这意味着他们正在使用的空间只有在完全消失后才能“可用”。这就是为什么<h5>仅在隐藏元素的时间结束后才“跳转”的原因。将时间更改为0(或简单地将其删除)会使用户“跳转”“不可见”,因为您已删除了该延迟。

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

同样,这将取决于您需要的项目“运行状况”如何,但是我认为,采用这种配置,您可以按照其他网站的标准获得良好的视觉效果。

如果需要图像和<p>缓慢消失,则需要手动更改<h5>的位置(您已经知道)。您可以在transition CSS中包含<h5>属性,或者在图像和timeOut消失后使用<h5>移动<p>



更新

如果需要缓慢隐藏图标和<p>,最好的解决方案可能是使用position: fixed设置所有内容,因此不会占用彼此的空间。

总之,您的<a>.nav-link将需要一个position: relative,并且所有子级(图标,<h5><p>)都将具有position: fixed。然后,您可以使用已经必须更改<h5> top属性的javascript函数。

请注意,现在位置已更改,您需要重新调整内容,找到正确的topleft属性:(

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

关于jquery - 隐藏导航栏上的元素时,如何解决导航栏中剩余元素发生的“跳动”?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55858645/

10-14 03:48