jQuery trigger action when a user scrolls past a certain part of the page

Question

Hey all, I need a jQuery action to fire when a user scrolls past certain locations on the page. Is this even possible with jQuery? I have 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 just when a user passes a certain area.

jondavidjohn · Answer 1 · 2013-10-11T14:59:35.567

49

Use the jquery event .scroll()

$(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/

edited Oct 11 '13 at 14:59

answered Jan 07 '11 at 15:47

jondavidjohn

61,812
21
118
158

I tested it with $("header, footer").animate({ backgroundColor: "#fd9c3d" }, 1200); in the if statement and it does not appear to be working – JJ Nold Jan 07 '11 at 15:58
just put an alert to test if the event is firing, inside and outside the if statement. – jondavidjohn Jan 07 '11 at 16:26

score 19 · Answer 2 · edited Jun 04 '18 at 11:16

19

Waypoints in jQuery should do it: http://imakewebthings.github.com/jquery-waypoints/

$('#my-el').waypoint(function(direction) {
  console.log('Reached ' + this.element.id + ' from ' + direction + ' direction.');
});

jQuery waypoints plugin documentation: http://imakewebthings.com/waypoints/guides/jquery-zepto/

edited Jun 04 '18 at 11:16

CPHPython

12,379
5
59
71

answered Oct 10 '11 at 11:33

chris

199
2
2

1

Just used waypoints.js on a parallax single page scrolling app. works excellent. One tip I can give you is to use links for waypoints. Set the visibility to hidden. You can use absolute positioning to set height of waypoint. Screen 1-1. – mbokil Sep 18 '13 at 14:35

Mohammad Mursaleen · Answer 3 · 2018-09-30T18:07:40.960

To fire any action only once on a single page I have modified jondavid's snippet as following.

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

            }
    });

})

Scroll down to Run code snippet

Here you can check example of working code snippet;

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 after you have scroll down to 150px')
     $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 down this block to get an alert</p>
</body>

why is there a `$` symbol in the `document.ready` function? If I put that it works or else it doesn't work. Reason? @Mursaleen — Rehan, Jan 30 '17 at 17:40
actually sometimes `$` in not defined like in case of WordPress but `jQuery` is defined over there. So here by placing it in `function($){ ... }` means `$=jQuery` . Thats why if you remove `$` sign from above code it might stop working in some cases. — Mohammad Mursaleen, Jan 31 '17 at 07:42

jQuery trigger action when a user scrolls past a certain part of the page

3 Answers3

Scroll down to Run code snippet

Linked