body { transition: background-color 1s ease; } .color-blue { background-color: #2F8FED; } .color-green { background-color: #4DCF42; } .color-yellow { background-color: #FAEB33; } .color-orange { background-color: #F19031; } .color-red { background-color: #F2293A; }
<script>
jQuery(function($){
$(window).scroll(function() {
// selectors
var $window = $(window),
$body = $('body'),
$panel = $('.panel');
// Change 33% earlier than scroll position so colour is there when you arrive.
var scroll = $window.scrollTop() + ($window.height() / 3);
$panel.each(function () {
var $this = $(this);
// if position is within range of this panel.
// So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
// Remember we set the scroll to 33% earlier in scroll var.
if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
// Remove all classes on body with color-
$body.removeClass(function (index, css) {
return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
});
// Add class of currently active div
$body.addClass('color-' + $(this).data('color'));
}
});
}).scroll();
});
</script>
If you need any plugin for this tutorial you can find it in the plugins page.
