Run jQuery event only once after a condition matches

Question

I am making online product site, I am trigging a scroll event, at starting only 12 elements will be shown but when 8th element is scrolled to top scroll event should run only once, but it is running every time when I scroll down, please help. Here is my Code:

var navigation_offset_top = $('.prods-list li:nth-child(4)').offset().top;  
    $(window).on("scroll",function(){
        var scroll_top = $(window).scrollTop(); // current vertical position from the top
        // if scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
        if (scroll_top > sticky_navigation_offset_top) 
        { 
            console.log("Hi");
        }       
    });

put a var trigger=true at start. after the first click make it false, based on it allow to scroll or not — Bhadra, Mar 26 '13 at 12:37

adeneo · Answer 1 · 2020-06-17T18:12:01.927

6

Use on() and off(), and unbind the event handler when the scrolling reaches the right point :

var navigation_offset_top = $('.prods-list li:nth-child(4)').offset().top;  

$(window).on("scroll", doScroll);

function doScroll() {
    var scroll_top = $(window).scrollTop();
    if (scroll_top > sticky_navigation_offset_top) { 
        console.log("Hi");
        $(window).off('scroll', doScroll);
    }
};

edited Jun 17 '20 at 18:12

answered Mar 26 '13 at 12:39

adeneo

312,895
29
395
388

You have a ")" to much in the bottom. Nice answer. – Peter Højlund Palluth May 14 '20 at 11:58
@PeterHøjlundAndersen - Indeed, edited out, thanks ! – adeneo Jun 17 '20 at 18:12
Are we taking advantage of hoisting here, when we reference the doScroll function inside of its definition? – jared Jul 06 '21 at 18:12

score 4 · Answer 2 · edited Mar 26 '13 at 12:37

4

Call unbind() to unbind the event from the object.

$(window).on("scroll",function(){
    var scroll_top = $(window).scrollTop(); // current vertical position from the top
    // if scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
    if (scroll_top > sticky_navigation_offset_top) 
    { 
        console.log("Hi");
    }       
    $(this).unbind("scroll");
});

edited Mar 26 '13 at 12:37

Rick Kuipers

6,616
2
17
37

answered Mar 26 '13 at 12:37

Daniel Imms

47,944
19
150
166

your code is working fine, but I want to run the same event when next 8th element code: `var navigation_offset_top = $('.prods-list li:nth-child(4)').offset().top; var navigation_offset_top1 = $('.prods-list li:nth-child(8)').offset().top; $(window).on("scroll",function(){ var scroll_top = $(window).scrollTop(); if (scroll_top > navigation_offset_top || scroll_top > navigation_offset_top1) { console.log("Hi"); $(this).unbind('scroll'); } });` but it is not working.. please check it once. – Bharat Soni Mar 26 '13 at 13:29

score 3 · Answer 3 · answered Mar 26 '13 at 12:41

3

I think what you need is .one method

$(window).one("scroll",function(){
    var scroll_top = $(window).scrollTop(); // current vertical position from the top
    // if scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
    if (scroll_top > sticky_navigation_offset_top) 
    { 
        console.log("Hi");
    }       
});

You can learn more here: http://api.jquery.com/one/

answered Mar 26 '13 at 12:41

tassiodias

101
5

Some of the answers solve your problem? If not try putting your code in [jsFiddle](http://jsfiddle.net/). – tassiodias Mar 26 '13 at 13:06
4

`one()` only works once, so the second you touch the scrollbar or the mousewheel, it fires once, and no more, so it never gets to the conditional statement. Amazed this got two upvotes ? – adeneo Mar 26 '13 at 13:18
This is getting upvoted probably because the title doesn't really match the question. `one()` is a proper way to run a jQuery event only once, which is what the question title asks. – Joseph Gabriel Jan 27 '15 at 13:07

score 1 · Answer 4 · answered Mar 26 '13 at 12:37

1

you can unbind the event after complete.

Like $(this).unbind("scroll);

answered Mar 26 '13 at 12:37

PSR

39,804
41
111
151

score -1 · Answer 5 · answered Apr 29 '15 at 00:08

var thisHash = window.location.hash;
jQuery(document).ready(function() {

    if(window.location.hash) {
      jQuery.fancybox(thisHash, {
        padding: 20
        // more API options
      });
    }

});

This is even better, because you don't need the button to trigger fancybox. And with the previous code I wasn't able to insert a form inside fancybox, cause everytime I was clicking inside the form, it was relaunching fancybox.

Run jQuery event only once after a condition matches

5 Answers5

Linked

Related