javascript - 滚动条上的淡入元素

Question

我现在有一个功能，可以按顺序淡入元素，但是如果可能的话，我喜欢用鼠标滚轮来控制它们的不透明度。

有人可以建议我该怎么做吗？它需要鼠标滚轮插件吗？感谢您的任何输入

http://jsfiddle.net/gLtgj54s/

$('.sector-link').each(function (i) {
    $(this).delay(350 * i).fadeIn(800);
});

HTML 标记

<div style="overflow:scroll;width:100%; border:0; height:300px; ">
            <div style="height:3000px; position:relative;">
                <div style="position:fixed;left:0; top:50px;">
                     sector links...
                  </div>
              </div>
          </div>

Answer 1

一种方法是您可以使用数据属性来设置元素淡入的时间点。

<div class="sector-link" data-scroll-point="100">Link 1</div>

并且在 JS 中检查 scrollTop 值何时在元素的滚动点和下一个元素的滚动点之间的范围内。

var arr = [];
$('.sector-link').each(function(i) {
  arr.push($(this).data("scroll-point"));
});

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  elementFade(scrollTop);

});

elementFade = function(top) {
  for (var i = 0; i < arr.length; i++) {
    var min = arr[i];
    var max = i != (arr.length - 1) ? arr[i + 1] : (arr[i] + 100);
    if (top >= min && top < max) {
      $('[data-scroll-point="' + arr[i] + '"]').fadeIn(800);
      $('p.info').html($('[data-scroll-point="' + arr[i] + '"]').html() + " visible at point " + arr[i]);
    }
  }
}

body {
  height: 3000px;
}
p.info {
  position: fixed;
  top: 0;
  font-size: 11px;
  color: #555;
  background: #eee;
  padding: 3px;
}
.sector-link {
  float: left;
  margin: 5px;
  padding: 5px;
  border-radius: 2px;
  background: #abcdef;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="info">Not visible</p>
<div style="position:fixed;left:0; top:50px;">
  <div class="sector-link" data-scroll-point="100">Link 1</div>
  <div class="sector-link" data-scroll-point="300">Link 2</div>
  <div class="sector-link" data-scroll-point="500">Link 3</div>
  <div class="sector-link" data-scroll-point="700">Link 4</div>
  <div class="sector-link" data-scroll-point="1000">Link 5</div>
  <div class="sector-link" data-scroll-point="1200">Link 6</div>
  <div class="sector-link" data-scroll-point="2000">Link 7</div>
  <div class="sector-link" data-scroll-point="2500">Link 8</div>
</div>

Updated fiddle