Question

我正在尝试使用jQuery将固定的页脚元素更改为相对的滚动值。该代码可以工作，但是由于从相对到固定的变化，该类具有明显的闪烁效果，因为该类不断增加/删除。

切换之间应该有延迟/等待吗？还是其他可以阻止闪烁的东西？

$(window).scroll(function() {
  var distanceFromBottom = Math.floor($(document).height() - $(document).scrollTop() - $(window).height());

  if (distanceFromBottom < 260) {
    $(".js-subscribe-bar").addClass("fixed");
  } else {
    $(".js-subscribe-bar").removeClass("fixed");
  }
});

.subscription-wrapper {
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 80;
}

.fixed {
  position: relative;
}

@media (min-width: 1390px) {
  .subscription-wrapper {
    bottom: auto;
    left: auto;
    top: 227px;
    position: fixed!important
  }
}

@media (max-width: 1389px) {
  .ribbon--subscription {
    margin: 0
  }
}

.ribbon--subscription {
  height: 35px;
  text-transform: none;
  padding: 0 16px;
  width: 100%
}

.ribbon--subscription:after,
.ribbon--subscription:before {
  left: -30px
}

.ribbon--subscription:before {
  border-width: 0 30px 40px 0
}

.ribbon--subscription:after {
  border-width: 0 0 40px 30px
}

@media (min-width: 1390px) {
  .ribbon--subscription {
    height: 70px
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="" class="subscription-wrapper js-subscribe-bar">
  <div class="ribbon ribbon--reverse ribbon--subscription">
    <div class="container text-italic">Some text</div>
  </div>
</a>

Answer 1

您忘了在滚动功能的末尾插入return false

return false;

jQuery的滚动闪烁

1 个答案: