Question

所以我使用colorbox来创建一个灯箱。目前我在第一页加载时就这样了，用户会看到一个灯箱。 Cookie被删除，因此用户不会再看到此灯箱15天。我想这样做，只有当用户滚动到div＃cooler-nav时才会加载灯箱。

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

<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>

P.S。我想保持灯箱每15天加载一次的能力。

Answer 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 s scrollTop值：

if ($special.offset().top <= ($('body').scrollTop() + $(window).height())) {

以下是此演示：http://jsfiddle.net/wxeFP/1/

Answer 2

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

一旦用户滚动到某个Div，如何触发Lightbox Load

2 个答案: