Lightboxをトリガーする方法特定のDivにスクロールした後にロードする

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

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

012：ここで

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

は、このためのデモです

Answer 2

$(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要素が視野に入ってくるだけのようなコードを実行したい場合は、追加することができますbodyのscrollTop値にviewportの高さ：http://jsfiddle.net/wxeFP/1/