Best IT Recipes

JQuery trigger action when a user scrolls past a specific part of a page

Hi everyone, I need to activate jQuery when the user scrolls past certain places on the page. Is this possible with jQuery? I looked at .scroll in the jQuery API and I don't think this is what I need. It fires every time the user scrolls, but I need it to fire only when the user has passed a certain area.

+27
javascript jquery
Jan 07 2018-11-11T00:
source share
3 answers

Use the jquery.scroll () event

$(window).on('scroll', function() { var y_scroll_pos = window.pageYOffset; var scroll_pos_test = 150; // set to whatever you want it to be if(y_scroll_pos > scroll_pos_test) { //do stuff } });

http://jsfiddle.net/babumxx/hpXL4/

+42
Jan 07 2018-11-15T00:
source share

waypoints in jquery should do this http://imakewebthings.github.com/jquery-waypoints/

+18
Oct 10 '11 at 11:33
source share

To run any action only once on one page, I modified the jondavid snippet as follows.

 jQuery(document).ready(function($){ $triggered_times = 0; $(window).on('scroll', function() { var y_scroll_pos = window.pageYOffset; var scroll_pos_test = 150; // set to whatever you want it to be if(y_scroll_pos > scroll_pos_test && $triggered_times == 0 ) { //do your stuff over here $triggered_times = 1; // to make sure the above action triggers only once } }); })

Here you can check an example of a working piece of code;

 jQuery(document).ready(function($){ $triggered_times = 0; $(window).on('scroll', function() { var y_scroll_pos = window.pageYOffset; var scroll_pos_test = 150; // set to whatever you want it to be if(y_scroll_pos > scroll_pos_test && $triggered_times == 0 ) { alert('This alert is triggered when y_scroll_pos = 150') $triggered_times = 1; // to make sure the above action triggers only once } }); }) 
 p { height: 1000px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <p>scroll this block to get the result</p> </body>
+9
Aug 26 '15 at 5:13
source share


More articles:


All Articles