Contact

Contact

Title

jQuery action on scroll Y position or element trigger

description

Use jQuery actions on scroll, for example to show a header only on scrolling up, or changing section color when scrolling past a specific element.

Published 2022-08-26

Modified 2022-08-26

content

Y position trigger

				
					document.addEventListener('DOMContentLoaded', function() {
	jQuery(function($){
		var mywindow = $(window);
		var mypos = mywindow.scrollTop();
		mywindow.scroll(function() {
		if (mypos > 40) {
		if(mywindow.scrollTop() > mypos) {
			$('#headermain').addClass('headerup');
		} else {
			$('#headermain').removeClass('headerup');
		}
		}
		mypos = mywindow.scrollTop();
		}); 
	});
});
				
			
				
					#headermain{
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.headerup{
transform: translateY(-80px); /*adjust this value to the height of your header*/
}

Scroll past element trigger

				
					//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);
});

Sources & References