सीएसएस केवल स्टिकी पाद बनाने के लिए कैसे
आम तौर पर, हमें जावास्क्रिप्ट की आवश्यकता होती है स्क्रॉलिंग प्रभाव डालें वेब पेजों पर विभिन्न उपयोगकर्ता क्रियाओं से संबंधित। स्क्रिप्ट का काम करता है ट्रैकिंग कितना ऊपर या नीचे स्क्रॉल करती है, यह एक पृष्ठ लेता है, तथा एक कार्रवाई चलाता है जब एक ऊंचाई ऊंचाई तक पहुँच जाता है.
स्क्रॉलिंग प्रभाव के लिए जावास्क्रिप्ट का उपयोग करना विशेष रूप से बुरी बात नहीं है। वास्तव में अधिक जटिल मामले हैं जो हैं जावास्क्रिप्ट के बिना हल करने के लिए असंभव है. हालाँकि हैं सीएसएस हैक जो इन लिपियों को कई बार बदल सकता है.
यह पोस्ट आपको हो दिखाने वाली हैडब्ल्यू सीएसएस का उपयोग कर पेज स्क्रॉल पर पाद प्रकट प्रभाव बनाने के लिए. हम इसे प्रदर्शित करने के लिए दो उपयोग मामलों का उपयोग करेंगे: पूरे पृष्ठ के लिए एक (डेमो देखें) और व्यक्तिगत पृष्ठ तत्वों के लिए एक, जैसे लेख.
पूरा पृष्ठ
हमें एक पाद बनाने की जरूरत है कि पृष्ठ के नीचे से प्रकट होता है जबकि उपयोगकर्ता नीचे स्क्रॉल कर रहा है। इसके अलावा, जब वे पृष्ठ को वापस स्क्रॉल कर रहे हैं, तो पाद लेख की जरूरत है छिप जाना पेज के नीचे फिर से.
इस लक्ष्य को प्राप्त करने के लिए, पहले हमें एक बनाना होगा निश्चित स्थिति वाला पाद स्क्रीन के नीचे.
1. एक निश्चित पाद बनाएँ
चलो कुछ सामग्री और एक पाद जोड़ें पृष्ठ पर पहले। मैं HTML टैग्स का उपयोग कर रहा हूं मेरे डेमो में, पाद लेख के अंदर एक चमचमाती छवि दिखाई गई है, जो एक डरावना प्रभाव के लिए नहीं है, लेकिन आप अपनी पसंद की कोई अन्य छवि चुन सकते हैं. लोरेन इपसाम डलार सिट आमेट… सीएसएस में जा रहा है, किसी भी जगह को हटा दें के आसपास कुछ आयाम दें ( लागू करें दोनों रंग ठीक इस तरह से पाद के लिए तल पर पर्याप्त जगह होगी दिखाई देना जब उपयोगकर्ता पृष्ठ को नीचे स्क्रॉल करता है. बस। एक पूर्ण वेब पेज के लिए पाद प्रकट प्रभाव होता है। नीचे दिए गए कोडपेन डेमो को देखें. इस तकनीक का उपयोग एक व्यक्तिगत HTML तत्व (पाद लेख के साथ) के लिए किया जा सकता है काफी लंबे समय तक एक उचित पृष्ठ स्क्रॉल प्रभाव के लिए। यह विधि थोड़ी सी हैक की हुई है, क्योंकि यह वर्तमान में क्रोम और IE में काम नहीं करती है, लेकिन इसमें एक अच्छी वापसी है. सबसे पहले, एक पाद लेख के साथ एक लंबा लेख बनाते हैं। सिमेंटिक कोड को बढ़ावा देने के लिए, मैंने चुना लोरेन इपसाम डलार सिट आमेट… नीचे आप देख सकते हैं मूल स्टाइल लेख और पाद लेख का. मेरा लेख वर्तमान में इस तरह दिखता है। बेशक आप अन्य बुनियादी शैली के नियमों का भी उपयोग कर सकते हैं. पिछला पाद तय हो गया था, यह एक जा रहा है चिपचिपा होना. लागू करें आप अपने स्वाद के लिए इसके मूल्य को समायोजित कर सकते हैं, क्योंकि यह उस बिंदु को निर्धारित करता है जहां उपयोगकर्ता दिखाई या ऊपर स्क्रॉल करते समय पाद दिखाई देने या गायब होने लगता है।. दो लेख के निचले मार्जिन के लिए समान मूल्य, ताकि पूर्ण पाद प्रकट करने के लिए नीचे की ओर पर्याप्त स्थान हो. अब हमें जरूरत है लेख के नीचे एक उद्घाटन जिसके माध्यम से हम चिपचिपे पाद को नीचे और ऊपर स्क्रॉल करते हुए देख सकते हैं. इसे प्राप्त करने के लिए, प्रतिस्थापित करें अंत में, आइए लेख के पीछे पाद लेख रखें का उपयोग करते हुए और यह वही है, ऑन-स्क्रॉल खुलासा प्रभाव वाले व्यक्तिगत पृष्ठ तत्व किया जाता है। नीचे दिए गए कोडपेन पेन को देखें। आप हमारे गिथब पृष्ठ पर दोनों उपयोग के मामले भी पा सकते हैं. तथा शब्दार्थ के लिए। हालाँकि,
तब तक स्क्रॉल करते रहें जब तक आप पाद को न देख लें
द्वारा टैग 0 पर मार्जिन सेट करना, और इसे लंबे समय तक बना सकते हैं एक कस्टम ऊँचाई जोड़ना स्क्रॉल करने के लिए प्रेरित करें (यदि आपके पेज में मौजूद बॉडी कंटेंट स्क्रॉल करने के लिए काफी लंबा है, तो आपको इसे ऊंचाई देने की आवश्यकता नहीं है).चौड़ाई तथा ऊंचाई) पाद करने के लिए, और इसकी स्थिति ठीक करें साथ स्क्रीन के नीचे करने के लिए स्थिति: निश्चित; तथा नीचे: 0; गुण. शरीर फ़ॉन्ट-परिवार: क्रिमसन टेक्स्ट; फ़ॉन्ट-आकार: 13pt; मार्जिन: 0; पाद चौड़ाई: 100%; ऊंचाई: 200 पीएक्स; स्थिति: निश्चित; नीचे: 0; पृष्ठभूमि-रंग: # DD5632;
2. पाद छिपाएँ
z- सूचकांक: -1 आदेश में पाद लेख के लिए नियम इसे अन्य सभी तत्वों के पीछे रखें पेज पर. तथा करने के लिए सफेद टैग पाद को ढंकना. body, html बैकग्राउंड-रंग: #fff; पाद चौड़ाई: 100%; ऊंचाई: 200 पीएक्स; स्थिति: निश्चित; नीचे: 0; पृष्ठभूमि-रंग: # DD5632; z- इंडेक्स: -1;
3. नीचे मार्जिन समायोजित करें
margin-bottom का टैग पाद की ऊंचाई के बराबर (मेरे उदाहरण 200px में). शरीर ऊंचाई: 1000 पीएक्स; मार्जिन: 0; मार्जिन-नीचे: 200px;
अलग-अलग पृष्ठ तत्व
1. एक लंबा लेख बनाएँ
तथा .
लेख 1
लेख चौड़ाई: 500 पीएक्स; पृष्ठभूमि का रंग: # FEF9F3; गद्दी: 20px 40px; लेख> पाद लेख ऊंचाई: 100px; पृष्ठभूमि-रंग: # FE0178; body font-family: cormorant garamond;
2. फुटर स्टिकी करें
स्थिति: चिपचिपा पाद लेख पर शासन करते हैं, इसलिए यह लेख की सीमाओं के अंदर चलेगा, लेकिन फिर भी अपनी स्थिति बनाए रखें स्क्रीन पर जबकि उपयोगकर्ता ऊपर और नीचे स्क्रॉल कर रहा है. लेख> पाद लेख ऊंचाई: 100px; पृष्ठभूमि-रंग: # FE0178; स्थिति: -बेटक-चिपचिपा; स्थिति: चिपचिपा; नीचे: 80 पीएक्स;
नीचे: 80px नियम पाद की स्थिति को ठीक करता है लेख के नीचे ऊपर 80px. लेख चौड़ाई: 500 पीएक्स; पृष्ठभूमि का रंग: # FEF9F3; गद्दी: 20px 40px; मार्जिन-बॉटम: 80 पीएक्स;
3. आंशिक रूप से पारदर्शी पृष्ठभूमि जोड़ें
पीछे का रंग लेख के साथ एक रैखिक ढलान पृष्ठभूमि छवि, जो लेख के शीर्ष से पाद लेख के शीर्ष तक है पृष्ठभूमि के रंग के साथ रंग लेख का, और शेष भाग नीचे की ओर है पारदर्शी बनाया. लेख चौड़ाई: 500 पीएक्स; गद्दी: 20px 40px; पृष्ठभूमि-छवि: रैखिक-ढाल (नीचे से, # FEF9F3 कैल्क (100% - 120px), पारदर्शी 0); मार्जिन-बॉटम: 80 पीएक्स;
calc (100% -120px) CSS फ़ंक्शन गणना करता है लेख की पूरी ऊंचाई माइनस फुटर है. मेरे उदाहरण में, यह 120px (ऊंचाई के लिए 100px) है + पैडिंग के लिए 20 पीएक्स).
4. पाद वापस रखें
z- इंडेक्स: -1 सीएसएस नियम. लेख> पाद लेख ऊंचाई: 100px; पृष्ठभूमि-रंग: # FE0178; स्थिति: -बेटक-चिपचिपा; स्थिति: चिपचिपा; नीचे: 80 पीएक्स; z- इंडेक्स: -1;
