Как заставить плагин jQuery waypoints срабатывать, когда элемент находится в поле зрения и не прокручивается?

Пожалуйста, посмотрите это:

http://jsfiddle.net/5Zs6F/2/

Как вы можете видеть, только когда вы прокручиваете первый красный прямоугольник, он становится синим, я бы хотел, чтобы он стал синим в тот момент, когда он появляется в поле зрения. Вот почему второй никогда не становится синим, потому что под ним недостаточно контента, чтобы вы могли прокручивать его.

HTML:

Scoll this window pane
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="box"></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="box"></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

CSS:

.box { width: 250px; height: 100px; border: 2px solid red;  }

jQuery:

$.getScript('http://imakewebthings.com/jquery-waypoints/waypoints.min.js', function() {


    $('.box').waypoint(function() {

        $(this).css({
            borderColor: 'blue'
        });

    });


});

Как заставить его срабатывать, как только рассматриваемый элемент виден и не прокручивается?


javascript jquery jquery-waypoints
person Community    schedule 19.09.2012    source источник

Ответы (4)


arrow_upward
41
arrow_downward

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

$('.box').waypoint(function() {
  $(this).css({
    borderColor: 'blue'
  });
}, { offset: 'bottom-in-view' });

Если вы хотите, чтобы он срабатывал, когда любая часть элемента заглядывает снизу, вы должны установить его на «100%».

person imakewebthings    schedule 20.09.2012
comment
@imakewebthings Извините, я не знал, как связаться с вами в stackoverflow, но я борюсь с чем-то, связанным с путевыми точками, не могли бы вы взглянуть? НАЖМИТЕ ЗДЕСЬ - person Imran Bughio; 09.05.2014
comment
Думаю, вы сможете более четко узнать о путевых точках, если прочитаете эту статью. script-tutorials.com/ @tk123 - person Bipon Biswas; 06.02.2015
comment
Я рекомендую либо не использовать учебник, на который ссылается бипон, либо воспринимать его с большой долей скептицизма. Он был написан почти 4 года назад и на несколько основных версий устарел. - person imakewebthings; 07.02.2015
comment
привет, я знаю, что это старый вопрос, но мне было интересно, есть ли способ установить смещение вверх на пути вниз и внизу на пути вверх без создания двух отдельных путевых точек? - person kai Taylor; 18.02.2015
comment
@kaiTaylor Нет, но похоже, что вы можете использовать Waypoint.Inview, который дает вам методы enter, entered, exit и exiting, которые срабатывают независимо от того, на какой стороне происходят эти вещи. - person imakewebthings; 24.02.2015

arrow_upward
0
arrow_downward

Не сработает для меня. У меня есть серверные классы с тем же именем, и все они будут изменены, если страница загружается/первый элемент находится на экране.

jQuery(document).ready(function(){

jQuery('.zoomInDownInaktiv').waypoint(function() {
    //jQuery(this).removeClass('zoomInDownInaktiv');
    jQuery(this).addClass('zoomInDown');
}, { offset: 'bottom-in-view' });

});

person Paul    schedule 30.11.2017

arrow_upward
0
arrow_downward

ХОРОШО. Нашел решение, работает нормально.

    jQuery('.zoomInDownInaktiv').waypoint(function(direction) {
    if (direction === "down") {
        jQuery(this.element).removeClass('zoomInDownInaktiv');
        jQuery(this.element).addClass('zoomInDown');
    }
}, { offset: '80%' });
person Paul    schedule 30.11.2017

arrow_upward
0
arrow_downward

Если вы хотите решить эту проблему с помощью css, вы также можете сделать это, используя приведенный ниже css.

img[data-src]::before {
    content: "";
    display: block;
    padding-top: 70%;
  }

Мы пытаемся использовать псевдоэлементы (например, ::before и ::after), чтобы добавить украшения к элементам img.

Браузеры не отображают псевдоэлементы изображения, потому что img является замененным элементом, то есть его макетом управляет внешний ресурс.

Однако из этого правила есть исключение: если атрибут src изображения недействителен, браузеры будут отображать его псевдоэлементы. Итак, если мы храним src для изображения в data-src, а src пуст, то мы можем использовать псевдоэлемент для установки соотношения сторон:

Как только data-src становится src, браузер прекращает рендеринг ::before и вступает в силу естественное соотношение сторон изображения.

person chiku    schedule 12.02.2020