jQuery fadeIn () HTML бөлімінің жоғарғы бөлігіндегі ерекше div

Келесі код бірнеше нәрсені жасауға арналған:

1) ағымдағы айналдыру орнын табыңыз

2) әрбір .popup_next үшін (сайттың әр бөліміне біреуі бар - әрбір бөлім мақала ) біз оны мақала деп тауып, offsetTop дегенді алыңыз 3) .offsetTop мәніне 30px қосыңыз және біздің $ offsetHide деп атаңыз, себебі біздің айналдыру ағымдық жылжу орны офсетТоп және аз $ 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, көзі
Бұл әдепкі бойынша display: none деген CSS арқылы жасырылады. Бұл нәтиже тек айналдыру күйі $ parentOffset және $ hideOffset мәндерінің арасында болғанда ғана іске қосылады.
қосылды автор Brian, көзі
Міне, жұмыс істемейтін мысал: jsfiddle.net/XG24G және мұнда жұмыс істейтін мысал айнымалы мәндерді алып тастағанда және қарапайым статикалық мәнді жасағанымда дұрыс (бұл $ (бұл) қолданылмайды, сондықтан ол қате түрде іске қосылады): jsfiddle.net/UdXvM/1
қосылды автор Brian, көзі
FadeIn алдында .popup_next жасырын (немесе fadeOut ) ма? Өйткені егер сіз жай ғана көрінетін элемент бойынша fadeIn болса, онда ешқандай нәтиже болмайды.
қосылды автор Jean-Charles, көзі

1 жауаптар

$ («. Popup_next») дегенді өзгертіңіз әр кодты $ («. 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: Нөлдік (анонимді) script.js: 6 e. extend.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
қосылды автор Brian, көзі