滚动“不流畅”/“口吃”时淡出

Question

我编写了一个小的 jquery 代码，它通过在向下滚动时更改不透明度来淡出叠加层。我认为一切正常，但不幸的是，在一些明显较旧的 PC 上，淡入淡出效果不流畅且卡顿。但是在我的电脑上一切都很完美。

这是我的脚本：

$(window).on('scroll', function() {
    var scrollTop = $(this).scrollTop();

    if($('.overlay').is(':visible') || (scrollTop < lastScrollTop)){
        if ($(this).scrollTop() < 150) {
            $('.overlay').show();
            $('.overlay').css('opacity', (150 - $(this).scrollTop()) / 150);
            $('.container-gesamt').css('padding-top', $(this).scrollTop());
        }else{
            $('.overlay').hide();
        }
    }
    lastScrollTop = scrollTop;
});

在我看来，这一定是旧硬件的问题，或者您怎么看？
如果是这样，您知道是否有办法让旧硬件上的效果更流畅？

Answer 1

一些小的性能改进可能是

const $overlay = $('.overlay');
const $window = $(window);
const $container = $('.container-gesamt');
const overlayIsVisible = $overlay.is(':visible');

$window.on('scroll', function() {
  const scrollTop = $window.scrollTop();

  if (overlayIsVisible || (scrollTop < lastScrollTop)) {
    if (scrollTop < 150) {
      if (!overlayIsVisible) {
        $overlay.show();
        overlayIsVisible = true;
      }
      $overlay.css('opacity', (150 - scrollTop) / 150);
      $container.css('padding-top', scrollTop);
    } else {
      if (overlayIsVisible) {
        $overlay.hide();
        overlayIsVisible = false;
      }
    }
  }
  lastScrollTop = scrollTop;
});