jQuery fadeIn () специфічний div, коли вгорі секції HTML

Наступний код призначений для виконання ряду дій:

1) Знайдіть поточну позицію прокрутки

2) Для кожного .popup_next (один для кожного розділу сайту - кожен розділ є статтею ) ми знаходимо його батьківську статтю і отримайте його offsetTop .
3) Додайте значення 30px до значення .offsetTop і зателефонуйте до нашого $ offsetHide , оскільки якщо наша поточна позиція прокручування перевищує offsetTop AND менше, ніж $ offsetHide , то fadeIn() , якщо позиція прокрутки знаходиться за межами цього діапазону, тоді ми fadeOut() .popup_next div.

На жаль, мені бракує більш конкретних деталей, але наступний код призначений для досягнення описаного вище ефекту. Я перевірив його всередині консолі JavaScript і немає помилок. На жаль, синтаксис, здається, не має помилок, але нічого не відбувається з ефектом, чи може хтось виявити помилки в моєму коді?

Дивись нижче:

*EDIT: Is there an error in using $(".popup_next").scroll(function() { where this function is not looking for a scroll on the whole window but rather only scrolling of the .popup_next element? *

*EDIT #2: Here is an example of the effect NOT working: http://jsfiddle.net/XG24G and here is an example of it working correctly when I remove the variables and make them simple static value (granted that $(this) is not used so it triggers for all erroneously): http://jsfiddle.net/UdXvM/1 *

$(window).scroll(function(){
       //gets the position of the window
          var y = $(window).scrollTop();

        $(".popup_next").scroll(function() {
            var $parentOffset = $(this).parent('article').offsetTop();
            var $hideOffset = $parentOffset + 30;
            if( y > ($parentOffset) && y < ($hideOffset) ) {
                $(this).fadeIn('350');}
            if( y > ($hideOffset) ) {
                $(this).fadeOut('500');}
            if( y < ($parentOffset) ) {
                $(this).fadeOut('500');}            
        });
});
0
Розум розміщення прикладу цього на jsfiddle? Хіба відповідь нічого не зробила.
додано Автор OptimusCrime, джерело
Він за замовчуванням прихований за допомогою CSS з display: none . Цей ефект спрацьовує лише тоді, коли позиція прокрутки знаходиться між значеннями $ parentOffset & $ hideOffset .
додано Автор Brian, джерело
Ось приклад ефекту, який НЕ працює: jsfiddle.net/XG24G , і тут приклад роботи правильно, коли я видаляю змінні і роблю їх простим статичним значенням (за умови, що $ (this) не використовується, тому він ініціюється для всіх помилково): jsfiddle.net/UdXvM/1
додано Автор Brian, джерело
Чи приховано ваш .popup_next (або fadeOut ) перед fadeIn? Тому що якщо ви просто fadeIn на видимий елемент, не буде ніякого ефекту.
додано Автор Jean-Charles, джерело

1 Відповіді

Змініть $ (". Popup_next"). Scroll на $ (". Popup_next"). Кожен . Цей код виконується лише тоді, коли прокручується елемент .popup_next - тобто він має overflow: auto; , і видимі смуги прокручування, а його вміст прокручується. Щоб цей код виконувався для кожного .popup_next , коли вікно прокручується, потрібно .each() .

Edit: Also, there is no .offsetTop() method. You want .offset().top.

http://jsfiddle.net/gilly3/Wcz3R/

Edit: Making this correction in your jsfiddle fixes it: http://jsfiddle.net/gilly3/XG24G/1/

1
додано
@Brian - Немає методу .offsetTop() . Див. Мою редакцію.
додано Автор gilly3, джерело
Це саме те, про що я думав після мого останнього редагування питання. Дякуємо, що зазначили це, але, на жаль, я все ще отримую нульову відповідь :(
додано Автор Brian, джерело
Завдяки @ gilly3! Я бачу, що він працює в JSfiddle, але при його реалізації в локальній середовищі, Google Chrome є помилкою: 6Uncaught TypeError: Неможливо прочитати властивість 'top' null (анонімна функція) script.js: 6 e. expand.eachjquery.min.js: 2 e.fn.e.eachjquery.min.js: 2 bscript.js: 5 f.event.handlejquery.min.js: 3 f.event.add.i.handle.k/code>
додано Автор Brian, джерело
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram