Currently, I am experimenting with jQuery's .animate() function to change the background of a div when it is scrolled more than 100 pixels down a page. Previously, I had successfully used .css() for this purpose.
JS:
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#top-links-bar').stop().animate({ 'background' : 'linear-gradient(white, gray)' }, 500);
} else {
$('#top-links-bar').stop().animate({ 'background' : 'none' });
}
});
Previous JS (functional):
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#top-links-bar').stop().css('background','linear-gradient(white, gray)');
} else {
$('#top-links-bar').stop().css('background','none');
}
});