javascript - 滚动时淡出/淡入 - 固定值无响应

Question

我目前正在一个网站上工作，我正在尝试更多地使用 jquery 我拼凑了一个脚本，可以在滚动时淡化元素。但是，现在的值是固定的。我遇到了这两个问题:

1) 较小的 View 让我延迟。

2) 较大的 View 会快速淡出。

代码如下:

        $(document).scroll(function() {    
          var scroll = $(window).scrollTop();
          if (scroll > 500) {
            $("#content-slide-1").addClass("fading");
          } else {
            $("#content-slide-1").removeClass("fading");
          }
          if (scroll > 1200) {
           $("#content-slide-2").addClass("fading");
          } else {
           $("#content-slide-2").removeClass("fading");
          }
          if (scroll > 1900) {
           $("#content-slide-3").addClass("fading");
          } else {
           $("#content-slide-3").removeClass("fading");
          }
          if (scroll > 3000) {
           $("#content-slide-4").addClass("fading");
          } else {
           $("#content-slide-4").removeClass("fading");
          }
          if($(window).scrollTop() + $(window).height() > ($(document).height() - 400) ) {
           $("nav").addClass("hidden");
         } else{
           $("nav").removeClass("hidden");
         }
        });

我通过添加/删除类来使它们淡入/淡出。所以我的问题是有没有办法让淡入淡出响应更快？如果这是正确的词，我应该做些什么来使代码更动态、更优雅。任何帮助将不胜感激。

CODEPEN

Answer 1

查看 css 转换，它们不能在旧浏览器上工作，但专为此类事情而设计。