the header shakes/tremble when I scroll - jQuery Scrolling problem

Question

I'm completely blocked, I don't understand why the header shakes/tremble when I scroll with this jquery script

$(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();
    }
});

this is the html file content

<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>

Can anyone help find why?

Answer 1

Instead of adding the CSS transition using JS, create a class and use jquery functions addClass and 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>

Answer 2

Already fixed!!!

As you can see I was using the sticky-top bootstrap class for header tag, this class apply position:sticky; property.

This cause the jquery detects that when the scrollTop was greater than 100 the div of the logo image changed its height therefore the scrollTop was again less than 100 and the div reappeared and remained in that game!

I just change to position:fixed; and the scrolling starts to work correctly.