如何触发灯箱加载一旦用户滚动到某个Div

所以我使用colorbox来创建一个灯箱。目前我在第一页加载时已经这样做了，用户被显示为一个灯箱。 Cookie被丢弃，因此用户在15天内没有看到该灯箱。我想这样做，只有当用户滚动到div＃cooler-nav时，才会加载lightbox。如何触发灯箱加载一旦用户滚动到某个Div

我的代码目前看起来是这样的：

<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天只加载一次的能力。

来源

2012-01-26 Syed Balkhi

$(window).bind('scroll.showcolorbox', function() { 
    if ($('body').scrollTop()+$(window).height() > $('#cooler-nav').offset().top) { 
     $.colorbox({...}); 
     $(window).unbind('scroll.showcolorbox'); 
    } 
});

来源

2012-01-26 20:19:45 ori

@Jasper已经解释了所有内容......（解除绑定除外，它确保您只显示一次colorbox） – ori

我可以运行您分享的代码并将灯箱加载一次div＃cooler-nav。解绑也很好。不过，我无法弄清楚饼干的工作是正确的。我想要做的是每15天只有一次灯箱展示。链接到我的代码：http://pastebin.com/2VFKquAp –

该代码在Firefox 9.0.1中不起作用 –

$(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.'); 
     } 
    }); 
});

你要做的就是一个事件处理程序绑定什么的scroll事件为window对象（或其他对象被滚动，即有滚动条）。在这个事件处理程序中，我们得到您想要观察的元素的顶部偏移量，并查看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/

来源

2012-01-26 20:18:38 Jasper

我可以运行代码Ori下面共享的代码，并在达到div＃cooler-nav时加载Lightbox。解绑也很好。不过，我无法弄清楚饼干的工作是正确的。我想要做的是让灯箱每15天只显示一次。链接到我的代码：pastebin.com/2VFKquAp –

如何触发灯箱加载一旦用户滚动到某个Div

回答

相关问题