JQuery исчезает в div, когда пользователь прокручивает этот div

Элемент <div class=""> будет исчезать при прокрутке пользователя до этого div.

Я нашел решение, используя плагин jQuery, и другое решение, чтобы проверить, является ли div видимым на странице. Оно работает.

Однако, как только пользователь прокручивается до вершины div, он исчезает слишком быстро, поэтому пользователь не видит, чтобы div затухал. Как заставить div исчезать ТОЛЬКО, если пользователь прокручивается до нижней части div, чтобы пользователь мог видеть хороший эффект затухания для всего div?

Ответ 1

вы упомянули, что используете плагин jQuery, я не знаю, пробовал ли вы плагин jQuery waypoints, вы можете сделать это, используя этот плагин легко, передав параметр смещения плагину следующим образом:

// by default your element will be hidden
$('div').hide();
// call waypoint plugin
$('div').waypoint(function(event, direction) {
    // do your fade in here
    $(this).fadeIn();
}, {
   offset: function() {
       // The bottom of the element is in view
       return $.waypoints('viewportHeight') - $(this).outerHeight();
    }
});

offset: определяет, как далеко верхняя часть элемента должна находиться в верхней части окна браузера, чтобы вызвать путевую точку. Это может быть число, которое принимается как число пикселей, строка, представляющая процент от высоты видового экрана, или функция, которая возвращает несколько пикселей.

поэтому в предыдущем примере ваш div не будет исчезать, если он не посередине страницы.

Ответ 2

Этот javascript-код, возможно, похож на тот, который вы используете в настоящее время, и единственная разница в том, что используется смещение, которое является просто целевым элементом offset().top() + элементом height(). Демо-код исчезает в нескольких элементах <li>, поскольку нижняя часть элементов появляется в поле зрения.

tiles = $("ul#tiles li").fadeTo(0,0);

$(window).scroll(function(d,h) {
    tiles.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        if (a < b) $(this).fadeTo(500,1);
    });
});

Демо: jsfiddle.net/Marcel/BP6rq (полноэкранный режим)