Question

So I am using colorbox to create a lightbox. Currently I have it so on the first page load, the user is shown a lightbox. A cookie is dropped, so the user don’t see this lightbox for 15 more days. I would like to do it so the lightbox gets loaded only when a user scrolls to the div #cooler-nav.

My code currently looks like this:

<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. I would like to keep the ability of the lightbox loading only once every 15 days.

Answer 1

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