JQuery FadeIn () канкрэтныя DIV, калі ў верхняй частцы падзелу HTML

Наступны код прызначаны, каб зрабіць некалькі рэчаў:

1) Знайсці бягучую пазіцыю пракруткі

2) Для кожнага .popup_next (ёсць адзін для кожнага раздзела сайта - кожны раздзел з'яўляецца артыкула ) мы знаходзім яго бацькоў артыкула і атрымаць гэта offsetTop .
3) Дадаць 30px да значэння .offsetTop і называюць, што наш $ offsetHide , таму што, калі наша бягучая пазіцыя пракруткі пракруткі больш offsetTop і менш $ offsetHide то FadeIn() , калі становішча пракруткі ў любым месцы за межамі гэтага дыяпазону, то мы Згасанне() клавішы .popup_next дзіваў.

На жаль, што я не хапае больш канкрэтныя дэталі, але наступны код прызначаны для дасягнення эфекту, апісанага вышэй. Я праверыў яго ўнутры кансоль 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? Калі адказ Бялова не зрабiў гэта.
дададзена аўтар OptimusCrime, крыніца
Ён скрыты CSS з Дысплей: адсутнічае па змаўчанні. Гэты эфект спрацоўвае толькі калі становішча пракруткі паміж тэ $ parentOffset і $ hideOffset значэння.
дададзена аўтар Brian, крыніца
Вось прыклад эфекту не працуе: jsfiddle.net/XG24G і вось прыклад яго працы правільна, калі я выдаліць зменныя і зрабіць іх простымі статычнае значэнне (разумеюцца, што $ (гэта) не выкарыстоўваецца, так што трыгеры для ўсіх памылкова): jsfiddle.net/UdXvM/1
дададзена аўтар Brian, крыніца
Ці мае ваш .popup_next схаваны (або Згасанне ) перад FadeIn? Таму што, калі вы проста FadeIn на бачным элеменце, не будзе ніякага эфекту.
дададзена аўтар Jean-Charles, крыніца

1 адказы

Змяніць $ ( "popup_next"). Пракруткі у $ ( ". Popup_next"). Кожны . Як гэта, што код выконваецца толькі тады, калі .popup_next элемент пракручваецца - гэта значыць, у яго ёсць перапаўнення: аўто; і палосы пракруткі бачныя і яго змесціва пракруцілі. Для таго, каб гэты код выканаць для кожнага .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
дададзена
@ Браян - Там няма .offsetTop() метаду. Глядзіце маё рэдагаванне.
дададзена аўтар gilly3, крыніца
Гэта менавіта тое, што я думаў, пасля майго апошняга рэдагавання пытання. Дзякуй за ўказанне, што, але, на жаль, я ўсё яшчэ атрымліваю нулявы адказ :(
дададзена аўтар Brian, крыніца
Дзякуй @ gilly3! Я бачу гэта працуе ў JSfiddle, але пры яго ажыццяўленні на маёй лакальнай асяроддзі Dev, Google Chrome з'яўляецца кідання памылка: 6Uncaught TypeError: Не атрымоўваецца прачытаць ўласцівасць «зверху» нулявых (ананімная функцыя) script.js: 6 е. extend.eachjquery.min.js: 2: 2 e.fn.e.eachjquery.min.js bscript.js: 5 f.event.handlejquery.min.js: 3 f.event.add.i.handle.k
дададзена аўтар Brian, крыніца