Как активировать Lightbox Load после того, как пользователь прокрутит до определенного раздела - PullRequest
Новая
       39

Как активировать Lightbox Load после того, как пользователь прокрутит до определенного раздела

0 голосов
/ 27 января 2012

Так что я использую 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>

PS Я хотел бысохранить возможность загрузки лайтбокса только один раз каждые 15 дней.

Ответы [ 2 ]

1 голос
/ 27 января 2012 
$(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 s кbody s scrollTop значение: 

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

Демонстрация для этого: http://jsfiddle.net/wxeFP/1/

0 голосов
/ 27 января 2012 
$(window).bind('scroll.showcolorbox', function() {
    if ($('body').scrollTop()+$(window).height() >  $('#cooler-nav').offset().top) {
        $.colorbox({...});
        $(window).unbind('scroll.showcolorbox');
    }
});
...