javascript - Alternative for jQuery scroll function? -

मेरे पास एक jQuery स्क्रिप्ट है जैसा निम्न है:

  $ (document) .ready (Function () {$ (window) .scroll (function () {if ($ (this) .scrollTop () & gt; 100) {$ ('# algemeen')। सीएसएस ('position', 'fixed'); $ ('# Algemeen')। चेतन ({शीर्ष: '0 पिक्सेल', बायीं: '70% ', चौड़ाई: '10%'}, 200);} और {$ ('# अलगेमिन')। सीएसएस ('स्थिति ',' निरपेक्ष '); $ (' # algemeen ')। चेतन ({शीर्ष:' 300px ', बायीं:' 100px ', चौड़ाई:' 200px '}, 200);}});});  

जैसा कि आप देख सकते हैं, मुझे यह div '#algemeen' मिल गया है जो उस स्थान को बदलता है जब पृष्ठ 100 पिक्सल नीचे स्क्रॉल होता है। समस्या यह है, यह बहुत लम्बी है और जब मैं स्क्रॉल कर रहा हूं तो अक्सर इसकी 'डाउनस्कॉल' स्थिति में रहता है क्या मेरा लक्ष्य हासिल करने का एक बेहतर तरीका है?

धन्यवाद अग्रिम!

का उपयोग करने के लिए बेहतर तरीका है और jQuery के / वर्ग कृपया जांचें, हम कक्षा एनिमेटेड को बदलते हैं:

जावास्क्रिप्ट :

  $ ( दस्तावेज़)। पर ('तैयार', फ़ंक्शन () {var scroller = $ ('# algemeen'); $ (विंडो) .on ('scroll', फ़ंक्शन () {if ($ (this) .scrollTop () & gt ; 100) {scroller.addClass ('एनिमेटेड');} और {scroller.removeClass ('एनिमेटेड');}});});  

से सीएसएस :

  # सेलिगर्मि {स्थिति: निरपेक्ष; शीर्ष: 300px; बाएं: 100px; चौड़ाई: 200px; संक्रमण: सभी रैखिक .2s; } # Algemeen.animated {स्थिति: तय; शीर्ष: 0; बाएं: 70%; चौड़ाई: 10%; }  

यह बेहतर है क्योंकि:

• ब्राउज़र एनिमेशन स्क्रिप्ट की तुलना में तेज़ हैं, वे कम सीपीयू का उपयोग करते हैं, वे बेहतर अनुकूलित होते हैं और इसकी वजह से वे अक्सर देखते हैं
• स्क्रिप्ट से सीएसएस को बदलना आसान है, आप मीडिया प्रश्नों को लागू कर सकते हैं।

आपको समझा सकता है (एक अच्छा डेमो है)।

< / div>