条件匹配后仅运行一次jQuery事件

Question

我正在制作在线产品网站,我正在触发一个滚动事件,在启动时只会显示12个元素但是当第8个元素滚动到顶部时滚动事件应该只运行一次,但每次我向下滚动时都会运行,请帮助.这是我的代码:

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

Answer 1

当滚动到达正确的点时,使用on()和off()取消绑定事件处理程序:

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