CODEWITHSUNDEEP
javascriptjquery
user3011784
user3011784

Reputation: 839

trigger function if scroll reaches a certain point only once. Not every time

I want to check if my users arrive at a certain point in my page. SO I created the following JS code:

$(document).on('scroll', function() {
    if($(this).scrollTop()>=$('#page2').position().top){

    alert("trigger");
    }
})

Which checks if the users reached my id="page2". But I want this to trigger ONLY once, no matter if the users goes back up and back down, right now it gets trigger everytime the page2.position().top = scrollTop.

How can I do this ?

Upvotes: 6

Views: 2646

Answers (3)

Rajshekar Reddy
Rajshekar Reddy

Reputation: 19007

You can just off the scroll event on your document after the first scroll has reached.

Edit: Also it would be better if you name your events, Which will help us remove the specific event by using the name. (Satpal already mentioned this in his answer before me, I am improving my answer standard as well.)

$(document).on('scroll.Page2ScrollEvent', function() {
    if($(this).scrollTop()>=$('#page2').position().top){

     $(this).off('scroll.Page2ScrollEvent'); // remove specific scroll event.

     alert("trigger");
    }
})

Upvotes: 0

Satpal
Satpal

Reputation: 133453

You can use event.namespace and off() to unbind event handler after execution of desired statement.

$(document).on('scroll.something', function() {
    if ($(this).scrollTop() >= $('#page2').position().top) {
        //Do something

        //Unbind the event
        $(document).off('scroll.something')
    }
})

Upvotes: 4

danish farhaj
danish farhaj

Reputation: 1354

You can use this code to achieve your desired output.

var checkonce = false;
$(document).on('scroll', function() {
    if($(this).scrollTop()>=$('#page2').position().top){
       if(checkonce == false) {
         alert("trigger");
         checkonce = true;
       }
    }
});

Upvotes: 0

Related Questions