Как исправить «прыжок», который происходит с оставшимися элементами в панели навигации, когда я скрываю элементы в панели навигации?

Question

Я пытаюсь решить небольшую проблему с переходом с помощью элементов h5 в моей панели навигации, я использую bootstrap4 и jQuery.

Что происходит, так это то, что в моей панели навигации у меня есть значок, элементы "h5" и "p" друг над другом в том порядке, 4 из которых расположены рядом с другим, и когда я прокручиваю страницу вниз, я хочу оставить только "h5".

Мне удалось это с помощью методов js hide и show, но когда они закончили скрывать, а для дисплея было установлено значение «none», мой «h5» немного подпрыгнул, чтобы занять центр панели навигации.

Я хотел найти решение для этого маленького прыжка в конце.

Я уже пробовал переходы с непрозрачностью, видимостью, высотой = 0 и т. Д., Такая работа, но затем мне нужно снова вручную отрегулировать положение 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,4 с вместо 0,8 с

Причина:

Элементы HTML будут занимать место на экране, если у них нет свойства display: none или position: absolute or fixed.Это означает, что пространство, которое они используют, не будет «доступно», пока они полностью не исчезнут.Вот почему ваш <h5> будет «прыгать» только после того, как время для скрытия элемента закончится.Изменение этого времени на 0 (или просто его удаление) сделает «скачок» «невидимым» для пользователя, потому что вы удалили эту задержку.

О переходе #mainNavbar из 0.8s до 0,4 с , это просто для того, чтобы сразу скрыть изображение и <p>.

Опять же, это будет зависеть от того, насколько «плавно» вам нужен ваш проект дляДа, но я думаю, что с этой конфигурацией у вас будет хороший визуальный эффект, соответствующий стандарту других веб-сайтов.

Если вам нужно, чтобы изображение и <p> медленно исчезали, вам нужно будет вручную изменить положениевашего <h5> (как вы уже знаете).Вы можете либо включить свойство transition в CSS <h5>, либо использовать timeOut для перемещения <h5> после того, как изображение и <p> исчезнут.

---

UPDATE

Если вам нужно медленно скрыть значки и <p>, лучшее решение, вероятно, состоит в том, чтобы установить все с помощью position: fixed, чтобы ничто не занимало место друг у друга.

В итоге ваш <a> или .nav-link потребуется position: relative, а у всех детей (значок, <h5> и <p>) будет position: fixed.Затем вы можете использовать функцию javascript, которая вам уже нужна, для изменения атрибута <h5> top.

Обратите внимание, что вам потребуется перестроить объекты, найти нужные атрибуты top и left, теперьэта позиция изменилась: (

Вот рабочий пример: https://codepen.io/brunomont/pen/XQoZrL