//get offsets for your trigger div's. Default 0, change using $('#trigger').offset({top:100})
//each object is by using trigger1.top, trigger2.top, or whatever you name your variables
jQuery(document).ready(function($){
$('#websites article:last-of-type section.elementor-top-section').attr('id','trigger3');
var trigger1 = $('#trigger1').offset();
var trigger2 = $('#trigger2').offset();
var trigger3 = $('#trigger3').offset();
var trigger4 = $('#trigger4').offset();
function trigger_position_actions() {
var screenPosition = $(document).scrollTop();
if (screenPosition < trigger1.top) {
$('body').addClass('pinkbg');
$('body').removeClass('whitebg bgflasher greybg');
}
if (screenPosition >= trigger1.top) {
$('body').addClass('whitebg');
$('body').removeClass('pinkbg bgflasher greybg');
}
if (screenPosition >= trigger2.top) {
$('body').addClass('greybg');
$('body').removeClass('whitebg bgflasher pinkbg');
}
if (screenPosition >= trigger3.top) {
$('body').addClass('pinkbg');
$('body').removeClass('whitebg bgflasher greybg');
}
if (screenPosition >= trigger4.top) {
$('body').addClass('whitebg bgflasher');
$('body').removeClass('pinkbg greybg');
}
}
$(window).on('scroll resize', trigger_position_actions);
$(document).ready(trigger_position_actions);
});