如何觸發燈箱加載一旦用戶滾動到某個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

回答

相關問題