jQuery fadeIn () HTML bo'limining yuqori qismida maxsus div

Quyidagi kod bir necha narsalarni bajarishga mo'ljallangan:

1) Joriy o'tish joyini toping

2) har bir .popup_next uchun (saytning har bir bo'limi uchun bitta nuqta - har bir bo'lim maqola ) uchun uning asosiy kodi maqola offsetTop bo'lsin 3) .offsetTop qiymatiga 30px qo'shing va bizning $ offsetHide deb nom bering, chunki agar biz aylantirish oqimining qaymoqli pozitsiyasi ofsetTop va $ offsetHide dan katta bo'lsa, biz fadeIn() , agar aylantirish holati o'sha joydan tashqarida bo'lsa, biz fadeOut() .popup_next div qilamiz.

Afsuski, men ko'proq aniq ma'lumotlarga ega emasman, lekin quyidagi kod yuqorida ko'rsatilgan ta'sirga erishish uchun mo'ljallangan. Buni JavaScript konsolida tekshirdim va xatolik yo'q. Afsuski, sintaksisi hech qanday xatolikka ega emas, lekin hech qanday ta'siri yo'q, kodimdagi xatolarni kimdir topishi mumkinmi?

Pastga qarang:

*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
Ushbu misolni jsfiddle-ga yuborish kerakmi? Agar javob bo'lmasa, unda bunday qilmagan.
qo'shib qo'ydi muallif OptimusCrime, manba
CSS tomonidan display: none bilan sukut saqlanadi. Ushbu effekt faqatgina o'tish kodi $ parentOffset & $ hideOffset qiymatlari orasida bo'lganida faqat tetiklanadi.
qo'shib qo'ydi muallif Brian, manba
Ishlamaydigan effektning misoli quyida keltirilgan: jsfiddle.net/XG24G va bu erda ishlashning namunasi o'zgaruvchilarni olib tashlaganimda va ularni oddiy statik qiymatga keltirganimda (bu $ (bu) ishlatilmayapti, shuning uchun uni noto'g'ri ishlatish uchun ishlatiladi): jsfiddle.net/UdXVM/1 <
FadeIn oldidan .popup_next yashirin (yoki fadeOut ) bormi? Agar siz faqatgina paydo bo'lgan elementga tushib qolsangiz, hech qanday ta'siri bo'lmaydi.
qo'shib qo'ydi muallif Jean-Charles, manba

1 javoblar

$ (". Popup_next") ni o'zgartiring, $ (". Popup_next") har bir ga aylantiring. Bu kod faqatgina .popup_next elementi aylantirilganda amalga oshiriladi, ya'ni overflow: auto; va scrollbars ko'rinadi va u tarkibga kirdi. Oynani almashtirganda, kodni har .popup_next uchun bajarish uchun .each() ni ishlating.

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
qo'shib qo'ydi
@Brian - .offsetTop() usuli yo'q. Tahririmga qarang.
qo'shib qo'ydi muallif gilly3, manba
Bu mening savolimga oxirgi tahrir qilinganidan keyin nima deb o'ylardim. Buni ko'rsatganingiz uchun tashakkur, lekin afsuski, men hali nol javob bermayman :(
qo'shib qo'ydi muallif Brian, manba
Rahmat @ gilly3! JSfiddle'da ishlashini bilaman, lekin mening mahalliy dev muhitimda bajarishda Google Chrome xatoga yo'l qo'yadi: 6Uncaught TypeError: null (anonim funksiya) script.js: 6 ga. extend.eachjquery.min.js: 2 f.event.add.i.handle.k
qo'shib qo'ydi muallif Brian, manba
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb