卷轴上的FadeOut / FadeIn -固定值不响应

Question

我目前在一个网站上工作，我正在尝试转到jquery，我拼凑了一个在滚动上淡出元素的脚本。但是，现在的值是固定的。我遇到了这两个问题：

1)较小的视图会导致延迟。

2)较大的视图会很快淡出。

代码如下：

        $(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转换，它们不能在老的浏览器上工作，但却是为这类事情而设计的。

Answer 2

首先，为了提高性能，我建议使用Request Animation Frame而不是Scroll，请参阅this。其次，CSS transitions是针对这类动画的新一代动画工具。

$(document).ready(function() {

var blockArr = [];
    var $blocks = $(".blocks");
    $.each($blocks, function(index, val) {
         var obj = {};
         obj.offsetTop = $(val).offset().top;
         obj.startAni = $(val).outerHeight(true);
    });

function callSomeFunctionEachRequestAnimationFrame() {
    var scrollTop = window.scrollTop;
    for (var i = 0; blockArr.length < i; i++) {
        if (blockArr[i].offsetTop + (blockArr[i].startAni / 2) > scrollTop) {
            // perform some kinda animation
            // e.g. add class or change css properties directly
        }
    }
}

// binds a function "raf" to window
window.raf = (function() {
  return window.requestAnimationFrame  ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame    ||
    function (callback) {
            window.setTimeout(callback, 1000 / 60); // 60 FPS
    };
})();

function loop() {
    callSomeFunctionEachRequestAnimationFrame();
    raf(loop);
}

raf(loop);

})

Answer 3

使用.offset().top获取元素的当前位置(在不同的屏幕上会有所不同)

​

var $cs1 = $('#content-slide-1').offset().top, 
    $cs2 = $('#content-slide-2').offset().top, 
    $cs3 = $('#content-slide-3').offset().top, 
    $cs4 = $('#content-slide-4').offset().top;
//alert($cs3);

$(document).scroll(function() {    
  var scroll = $(window).scrollTop();
  if (scroll > $cs1 ) {
    $("#content-slide-1").addClass("fading");
  } else {
    $("#content-slide-1").removeClass("fading");
  }
  if (scroll > $cs2) {
    $("#content-slide-2").addClass("fading");
  } else {
    $("#content-slide-2").removeClass("fading");
  }
  if (scroll > $cs3) {
    $("#content-slide-3").addClass("fading");
  } else {
    $("#content-slide-3").removeClass("fading");
  }
  if (scroll > $cs4) {
    $("#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");
  }
});

.content-slide {
  opacity: 1;
  -webkit-transition: all 800ms;
  -moz-transition: all 800ms;
  -o-transition: all 800ms;
  transition: all 800ms;
}
.content-slide.fading {
  opacity: 0;
  -webkit-transition: all 800ms;
  -moz-transition: all 800ms;
  -o-transition: all 800ms;
  transition: all 800ms;
}
.content-slide.solid-dark {
  background: #60504d;
  min-height: 1000px;
}
.content-slide.solid-teal {
  background: #67baaf;
  min-height: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container-fluid">
<div class="row">
	<div id="content-slide-1" class="content-slide solid-teal">
	</div>
	
	<div id="content-slide-2" class="content-slide solid-dark">
	</div>
	
	<div id="content-slide-3" class="content-slide solid-teal">
	</div>
	
	<div id="content-slide-4" class="content-slide solid-dark">
		
	</div>
</div>
</div>

​