所以我使用colorbox来创建一个灯箱。目前我有它，所以在第一页加载时，用户会看到一个灯箱。一个cookie被丢弃，因此用户在15天内不会再看到这个灯箱。我想这样做，只有当用户滚动到div#cooler导航时，灯箱才会被加载。
我的代码目前看起来是这样的：
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*15;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"700px", inline:true, href:"#subscribepop"});
}
});
</script>
附言：我想保持灯箱每15天只装载一次的能力。
$(function () {
var $special = $('#cooler-nav');
$(window).on('scroll', function () {
if ($special.offset().top <= $('body').scrollTop()) {
console.log('You have reached the `#special` element');
} else {
console.log('You aren't quite there yet.');
}
});
});
您所做的是将事件处理程序绑定到window对象（或任何正在滚动的对象，即具有滚动条）的scroll事件。在这个事件处理程序中，我们获得要观察的元素的顶部偏移量，并查看window是否已滚动到其高度。
下面是一个演示：http://jsfiddle.net/wxeFP/（当您滚动经过#cooler-nav元素时，请注意您的控制台，以查看消息的变化）
如果您想在#cooler-nav元素出现时运行代码，您可以将viewport的高度添加到body的scrollTop值中：
if ($special.offset().top <= ($('body').scrollTop() + $(window).height())) {
下面是一个演示：http://jsfiddle.net/wxeFP/1/
$(window).bind('scroll.showcolorbox', function() {
if ($('body').scrollTop()+$(window).height() > $('#cooler-nav').offset().top) {
$.colorbox({...});
$(window).unbind('scroll.showcolorbox');
}
});