Uncertainty clouds my mind as to the practicality of this approach, the potential performance implications, and the frequency of scroll events firing to make this technique viable. Nevertheless, within a fixed height div (overflow-y: auto) lies a table.
My aspiration is to introduce an effect where each row and its contents fade out proportionally based on how far they are off the screen.
The core of the jQuery solution I've devised appears as follows:
// on scroll event
$("#someDiv").on('scroll', function () {
// grab each row
$('tr', this).each(function () {
var mainHeight = $("#someDiv").height();
var rowTop = $(this).offset().top;
var rowHeight = $(this).height();
var rowBottom = rowTop + rowHeight;
// the row has completely scrolled out of view
if (rowBottom < 0 || rowTop > mainHeight) {
$(this).css({
opacity: 0
});
return;
}
// the row is entirely visible
if (rowTop > 0 && rowBottom < mainHeight) {
$(this).css({
opacity: 1
});
return;
}
// apply fade out effect based on scroll position
if (rowTop < 0)
$(this).css({opacity: rowBottom / rowHeight});
else if (rowBottom > mainHeight)
$(this).css({opacity: (mainHeight - top) / height });
});
});
Despite the functionality of this code, achieving the opacity transition on a tr element remains elusive.
Important: My priority is for this to function flawlessly in Chrome.
See demonstration on JS Fiddle