Run jQuery event only once after a condition matches

html, jquery

Solution

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

Problem

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"); } }); ```

Original source