FadeIn elements on scroll

Question

I have a function that at the moment, fades in elements sequentially however id like the mousewheel to control their opacity instead if its possible.

Can anybody advise on how i would do this? Would it require the mousewheel plugin? thanks for any input

http://jsfiddle.net/gLtgj54s/

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

HTML Markup

<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

One approach is you can use data attributes to set a point when the element should fadeIn.

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

And in JS check when the scrollTop value is in the range between the element's scroll point and the next element's scroll point.

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

Answer 2

Anytime you use a mousewheel to scroll, the opacity changes to make it more or less visible. This is using the DOMMouseScroll event or the mousewheel event. See the following code:

function moveObject(event){
    var delta=0;
    if(!event)event=window.event;
    if(event.wheelDelta){
        delta=event.wheelDelta/600;
    }else if(event.detail){
        delta=-event.detail/20;
    }
    var target = $('body > div');
    var adj = parseFloat(target.css('opacity'));
    target.css('opacity',Math.max(0,Math.min(1,adj+Math.max(0.6,adj)*delta)));
}
if(window.addEventListener){
    document.addEventListener('DOMMouseScroll',moveObject,false);
}else{
    document.onmousewheel=moveObject;
}

Here's a jsFiddle to try it yourself: http://jsfiddle.net/gLtgj54s/14/

Thanks to: http://viralpatel.net/blogs/javascript-mouse-scroll-event-down-example/