时间戳

首页 > 解决方案 > 滚动时标题抖动/颤抖 - jQuery 滚动问题

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

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

谁能帮忙找出原因？

标签： javascriptjqueryhtmlcss

解决方案

已经修好了！！！

正如你所看到的，我使用的是sticky-top bootstrap类作为标题标签，这个类应用位置：sticky; 财产。

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

我只是更改为位置：固定；并且滚动开始正常工作。

推荐阅读