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获取元素的当前位置（将在不同的屏幕上更改）

＆＃13;

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");
  }
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 4

这是一个基于我编写的jQuery函数的简单解决方案。

function fadeIn(el) {
    $(el).each(function () {
        var bottom_of_object = $(this).offset().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + window.innerHeight;
        var top_of_object = $(this).offset().top;
        var top_of_window = $(window).scrollTop();
        /* If the object is completely visible in the window, fade it in */
        if (top_of_object > top_of_window) {
            $(this).removeClass("fading");
        }
        /*If it's starting to not be visible anymore, fade it out */
        if (bottom_of_object < bottom_of_window) {
            $(this).addClass("fading");
        }
    });
}

您可以在此codepen

中找到适用于您的代码的内容

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

4 个答案: