заголовок дрожит / дрожит при прокрутке - jQuery Проблема с прокруткой

Question

Я полностью заблокирован, я не понимаю, почему заголовок дрожит / дрожит при прокрутке с помощью этого jquery сценария

$(window).scroll(function() {
    if ($(this).scrollTop() >= 100) {
       $(".logo").css({ "height": "0px" });
       $(".logo img").hide();
    };
    if ($(this).scrollTop() <= 100) {
       $(".logo").css({
           "height": "95px",
           "-webkit-transition": "all 0.3s ease",
           "-moz-transition": "all 0.3s ease",
           "-ms-transition": "all 0.3s ease",
           "-o-transition": "all 0.3s ease",
           "transition": "all 0.3s ease"
        });
        $(".logo img").fadeIn();
    }
});

это html содержимое файла

<header class="d-flex justify-content-end sticky-top">
    <div class="container">
        <div class="row logo">
             <div class="col-12 text-center mt-2">
                  <img src="/images/logo.png" alt="Logo">
             </div>
        </div>
        <div class="row">
             <div class="col-12">
                 <nav class="navbar navbar-expand-lg navbar-light">

                 </nav>
              </div>
        </div>
        </div>
</header>

Может кто-нибудь помочь найти почему?

Answer 1

Уже исправлено !!!

Как вы видите, я использовал класс sticky-top bootstrap для тега заголовка, этот класс применяет position: sticky; свойство.

По этой причине jquery обнаруживает, что когда scrollTop был больше 100, div изображения lo go изменил свою высоту, поэтому scrollTop снова был меньше 100, и div снова появился и остался в эта игра!

Я просто перехожу в положение: исправлено; и прокрутка начинает работать правильно.

Answer 2

Вместо добавления перехода CSS с помощью JS создайте класс и используйте jquery функции addClass и removeClass

$(window).scroll(function() {
  if ($(this).scrollTop() >= 100) {
    $(".logo").removeClass('effect');
    $(".logo img").fadeOut();
  };
  if ($(this).scrollTop() <= 100) {
    $(".logo").addClass('effect');
    $(".logo img").fadeIn();
  }
});

* {
  margin: 0;
  padding: 0;
}

.container {
  height: 1000px;
}

.logo {
  top: 2px;
  left: 5px;
  position: sticky;
  height: 95px;
  width: 95px;
  overflow: hidden;
}

.logo img {
  height: 100%;
}

.effect {
  height: 95px;
  transition: linear 0.3s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container">
  <div class="logo">
    <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" />
  </div>
</div>