Javascript 将函数转换为能够将其用作；关于；事件

我目前拥有以下功能：

function isInView() {
  var windowStart = $(window).scrollTop();
  var windowEnd = windowStart + $(window).height();

  $('.box').each(function() {
    var box = $(this);
    var start = box.offset().top;
    var end = start + box.height();

    if (windowStart <= start && windowEnd >= end) {
      box.addClass('active');
    } else {
      box.removeClass('active');
    }
  });
}

$(document).scroll(isInView);

或针对不同的元素：

$('.nav').on('isinview', function () {
    if (elementIsInView) {
        // make the nav bigger
    } else {
        // make the nav the original height
    }
});

我该怎么做？

jQuery（函数（$）{
变量$window=$（window）；
函数notifyElementsInView（）{
var windowStart=$window.scrollTop（），
windowEnd=windowStart+$window.height（）；
$（'.bindInView'）。每个（函数（）{
var$element=$（此），
开始=$element.offset（）.top，
end=start+$element.height（）；
如果（WindowsStart=end）{
$element.trigger（'viewEnter'）；
}否则{
$element.trigger（'viewExit'）；
}
});
}
$（“.box”）
.on（'viewEnter'，function（）{
$（this.addClass（'active'）；
})
.on（'viewExit'，function（）{
$（this.removeClass（'active'）；
});
notifyElementsInView（）；
$（文档）.on（'scroll'，notifyElementsInView）；
$window.on（'resize'，notifyElementsInView）；
});
正文{
利润率：50像素；
}
.集装箱{
宽度：300px；
背景：浅灰色；
填充：50px；
}
.盒子{
显示：块；
宽度：100%；
高度：300px；
背景：灰色；
}
.box:非（：类型的最后一个）{
边缘底部：50px；
}
.box.active{
背景：红色；
}


jQuery（函数（$）{
变量$window=$（window）；
函数notifyElementsInView（）{
var windowStart=$window.scrollTop（），
windowEnd=windowStart+$window.height（）；
$（'.bindInView'）。每个（函数（）{
var$element=$（此），
开始=$element.offset（）.top，
end=start+$element.height（）；
如果（WindowsStart=end）{
$element.trigger（'viewEnter'）；
}否则{
$element.trigger（'viewExit'）；
}
});
}
$（“.box”）
.on（'viewEnter'，function（）{
$（this.addClass（'active'）；
})
.on（'viewExit'，function（）{
$（this.removeClass（'active'）；
});
notifyElementsInView（）；
$（文档）.on（'scroll'，notifyElementsInView）；
$window.on（'resize'，notifyElementsInView）；
});
正文{
利润率：50像素；
}
.集装箱{
宽度：300px；
背景：浅灰色；
填充：50px；
}
.盒子{
显示：块；
宽度：100%；
高度：300px；
背景：灰色；
}
.box:非（：类型的最后一个）{
边缘底部：50px；
}
.box.active{
背景：红色；
}
您可以将其重写为插件，并触发事件


$.fn.isInView=函数（）{
var self=这个；
$（窗口）.on（'scroll resize'，function（））{
var windowStart=$（window.scrollTop（）；
var windowEnd=windowStart+$（window）.height（）；
self.each（函数（）{
变量框=$（此）；
var start=box.offset（）.top；
var end=start+box.height（）；
如果（WindowsStart=end）{
如果（！box.data（'inview'））box.trigger（'isinview'）.data（'inview'，true）；
}否则{
if（box.data（'inview'））box.trigger（'haslefview'）.data（'inview'，false）；
}
});
}).触发器（“滚动”）；
回归自我；
}
$（“.box”）
.on（'isinview'，function（）{
$（this.addClass（'active'）；
}).on（'hasleftview'，function（））{
$（this.removeClass（'active'）；
}).isInView（）；//事件绑定后调用插件
正文{
利润率：50像素；
}
.集装箱{
宽度：300px；
背景：浅灰色；
填充：50px；
}
.盒子{
显示：块；
宽度：100%；
高度：300px；
背景：灰色；
}
.box:非（：类型的最后一个）{
边缘底部：50px；
}
.box.active{
背景：红色；
}
您可以将其重写为插件，并触发事件


$.fn.isInView=函数（）{
var self=这个；
$（窗口）.on（'scroll resize'，function（））{
var windowStart=$（window.scrollTop（）；
var windowEnd=windowStart+$（window）.height（）；
self.each（函数（）{
变量框=$（此）；
var start=box.offset（）.top；
var end=start+box.height（）；
如果（WindowsStart=end）{
如果（！box.data（'inview'））box.trigger（'isinview'）.data（'inview'，true）；
}否则{
if（box.data（'inview'））box.trigger（'haslefview'）.data（'inview'，false）；
}
});
}).触发器（“滚动”）；
回归自我；
}
$（“.box”）
.on（'isinview'，function（）{
$（this.addClass（'active'）；
}).on（'hasleftview'，function（））{
$（this.removeClass（'active'）；
}).isInView（）；//事件绑定后调用插件
正文{
利润率：50像素；
}
.集装箱{
宽度：300px；
背景：浅灰色；
填充：50px；
}
.盒子{
显示：块；
宽度：100%；
高度：300px；
背景：灰色；
}
.box:非（：类型的最后一个）{
边缘底部：50px；
}
.box.active{
背景：红色；
}

使用
此
而不是
'.box'
？因此，据我所知，您希望拥有滚动事件，找出视图中的元素，然后在这些元素上触发自定义事件？如果是这样的话，我的意思是，除了触发元素上的自定义事件外，您几乎拥有它。“我如何才能做到这一点”。。。请说得更具体些。花几分钟时间通读@Taplar这是正确的，我只是不知道应该如何修改代码以实现我所希望的。使用
this
而不是
'.box'
？因此，据我所知，您希望拥有滚动事件，找出视图中的元素，然后在这些元素上触发自定义事件？如果是这样的话，我的意思是，除了触发元素上的自定义事件外，您几乎拥有它。“我如何才能做到这一点”。。。请说得更具体些。花几分钟时间通读@Taplar这是正确的，我只是不知道应该如何修改代码来实现我想要的功能。不过函数不应该专门命名某些元素。我不想一直向
$（'.box，.nav'）添加元素。每个（function（）{
：：还有什么其他方法可以让你知道目标是什么？否则你必须计算dom中的每个元素。这不是一个好主意。你可以始终使用一个通用类“evaluateView”，并在上面选择。然后选择任何元素
$('.nav').on('isinview', function () {
    if (elementIsInView) {
        // make the nav bigger
    } else {
        // make the nav the original height
    }
});