Javascript 当我滚动时标题会抖动-jQuery滚动问题

我完全被阻止了，我不明白当我使用这个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();
    }
});

$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>=100）{
$（“.logo”）.css（{“高度”：“0px”}）；
$（“.logo img”）.hide（）；
};
if（$（this）.scrollTop（）而不是使用JS添加CSS转换，创建一个类并使用jquery函数
addClass
和
removeClass


$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>=100）{
$（“.logo”）.removeClass（“效果”）；
$（“.logo img”）.fadeOut（）；
};
如果（$（this）.scrollTop（）已修复！！！

正如您所看到的，我使用sticky top bootstrap类作为header标记，这个类应用位置：sticky；property

这导致jquery检测到当scrollTop大于100时，徽标图像的div改变了其高度，因此scrollTop再次小于100，div重新出现并保留在该游戏中

我只是换到位置：fixed；滚动开始正常工作。
要解决这个问题，我们需要查看相关的HTML和CSS，以便重新创建行为。不要使用scrollTop设置样式。最好在scroll上添加新类，并在.CSS文件中设置样式。
<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>