So here is my solution to the problem:
Items that have a class of .sectrol-link fade out or in one by one based on how you scroll.
In order for this method to work you dont have to have an actual scrollbar. The solution doesnt keep track of the scroll position, it is based on the 'scrollwheel' event.
It also fades out the elements when scrolling up.
I am sure you can tweak the solution to match your needs.
// Constants
var pxPerItem = 720;
var sectorLinks = $('.sector-link');
var scrollYMax = sectorLinks.length * pxPerItem;
//Fade controller variable
var currentScrollY = 0;
//Calculates fade value for the item based on current 'scroll' position
function calculateFade(itemNo) {
var relativeScroll = (currentScrollY - pxPerItem * itemNo) / pxPerItem;
return Math.min(Math.max(0, relativeScroll), 1)
}
//Keeps the controller scroll variable within the bounds based on the amount of elements.
function normalizeCurrentScroll() {
currentScrollY = Math.min(Math.max(0, currentScrollY), scrollYMax);
}
//The actual event that controls items fade
$(window).bind('mousewheel DOMMouseScroll', function(event){
var delta = event.originalEvent.wheelDelta == 0 ? event.originalEvent.detail : event.originalEvent.wheelDelta;
currentScrollY -= delta;
for (var i = 0; i < sectorLinks.length; i++) {
$(sectorLinks[i]).fadeTo(20, calculateFade(i));
}
normalizeCurrentScroll();
});
The amount of wheel scrolling needed to fade in or fade out the link is controlled by 'pxPerItem' variable. If you want to place such a thing somehere down below on your page, you would have to tweak scrollYMax variable and calculateFadeFunction so that they match your height.
Fiddle: https://jsfiddle.net/gLtgj54s/18/
