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

不要使用JS添加CSS过渡，而是创建一个类并使用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>

Answer 2

已修复！

如您所见，我在标题标签中使用了sticky-top bootstrap类，该类应用position：sticky;属性。

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

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

滚动时页眉摇晃/颤抖-jQuery滚动问题

2 个答案: