Question

我在这里找不到可以解决我的问题的答案-

我最近在我的个人网站上实现了一堆addClass和removeClass jQuery行为，当该元素出现时会触发该行为。我将CSS设置为将其置于屏幕之外的像素大小，并且当滚动到该元素时，会向该元素添加一个类，将其重新显示在屏幕上。

我在控制台中没有收到任何JS错误，并且我的所有图像都已压缩。不知道是什么原因造成的，但是看起来很粗糙。任何提示将是惊人的。

jQuery函数示例

  $(window).scroll(function() {
    var sT = $(this).scrollTop();
    var sB = sT + $(window).height();
    var tag = $(".outer-box-l-1");

    if ($(tag).position().top < sB) {
      $(tag).addClass("visible");
    } else {
      $(tag).removeClass("visible");
    }
  });

CSS

.outer-box-l-1 {
  display: inline-block;
  margin: 0px 8px 40px 8px;
  width: 35%;
  max-width: 1200px;
  list-style: none;
  text-align: center;
  z-index: unset;
  opacity: 0;
  transform: translate(-850px, 0);
  transition: all 0.5s;
}

.outer-box-l-1.visible {
  transform: translate(0, 0);
  opacity: 1;
}

如何优化jQuery和CSS-抖动的滚动过渡

0 个答案: