कैसे मध्य div एक निश्चित स्थिति हेडर की तरह अभिनय करने के लिए जब मध्य div माउस स्क्रॉल द्वारा शीर्ष स्थान पर जाएं-jquery, सीएसएस

मैं कुछ अनुभाग कर रहा हूँ। वे हैं:

1. हैडर (मध्यम ऊंचाई की सामग्री)
2. शेष खंड (छोटी ऊंचाई की सामग्री)
3. सामग्री (अतिरिक्त बड़ी ऊंचाई की सामग्री)

प्रारंभ में सभी अनुभाग दिखाई दे रहे हैं सामग्री खंड अतिरिक्त बड़ा है, हम उस अनुभाग के कुछ भाग को पहली बार देख सकते हैं। ब्राउज़र का सामान्य व्यवहार हैं:

यदि हम माउस को थोड़ा नीचे स्क्रॉल करते हैं, तो कुछ भाग हैडर अनुभाग गायब हो जाएगा और कुछ और भाग सामग्री सेक्शन दिखाई देगा। यदि हम माउस को अधिक नीचे स्क्रॉल करते हैं, हैडर पूरी तरह से गायब हो जाएगा और कुछ और भाग सामग्री दिखाई देगा। अभी व, शेष खंड शीर्ष स्थान पर है क्योंकि हेडर नीचे माउस को स्क्रॉल करने के लिए गायब हो गया। तो, वेबपृष्ठ का दृश्यमान भाग है:

1. शेष खंड
2. सामग्री

यदि हम माउस को अधिक नीचे स्क्रॉल करते हैं, शेष खंड गायब हो जाएगा और केवल दिखाई देने वाला हिस्सा अब है सामग्री अनुभाग।

वे ब्राउज़र के सामान्य व्यवहार हैं। अब, मैं ऐसा करने की कोशिश कर रहा हूं:

कब, हैडर माउस नीचे स्क्रॉल करके सेक्शन गायब हो जाएगा, शेष खंड हेडर की जगह लेगा और शीर्ष स्थान पर सेट करेगा (फिर भी यह सामान्य व्यवहार में है)। उस समय शेष खंड होगा position: fixed उस पर शीर्ष स्थिति और एक निश्चित हेडर की तरह कार्य करें। इसलिए, हम माउस को कितना नीचे स्क्रॉल करते हैं और सामग्री के सभी भाग से गुजरते हैं, वह शेष खंड उस शीर्ष स्थान पर हर समय दिखाई देगा। मुझे लगता है, केवल सीएसएस के साथ, यह "टी संभव हो सकता है। क्योंकि, यदि मैं आवेदन करता हूं:

.remaining {
position: fixed;
top: 600px;
}

यह हर समय मध्यम स्थिति में रहेगा। लेकिन, मैं चाहता हूं कि जब शीर्ष स्थान पर तय किया जाएगा हैडर माउस स्क्रॉलिंग के समय सेक्शन गायब हो गया। फिर से, जब माउस को स्क्रॉल करें तो सब कुछ सामान्य की तरह काम करना चाहिए हैडर दृश्यमान और शेष खंड नीचे जाने के लिए हैडर आदि, तो उस तरह के CSS डॉन 't मेरी मदद करो।

तो, मैं शीर्ष लेख को गायब करते समय कैसे नियत किया गया अनुभाग निर्धारित कर सकता हूं और माउस स्क्रॉल करके हेडर प्रदर्शित करते समय सब कुछ रीसेट कर सकता हूं?

यहाँ मेरा बेवकूफ़ है

उत्तर:

उत्तर № 1 के लिए 1

द्वारा एक सुरुचिपूर्ण समाधान गुइल हर्नांडेज़ अपनी आवश्यकताओं को पूरी तरह से फिट होगा।

अपने CSS में एक एकल वर्ग जोड़ें:

.remaining-scrolled {
top:0;
position:fixed;
width:100%;
}

और jQuery की सिर्फ कुछ पंक्तियाँ जोड़ें:

var  mn = $(".remaining");
mns = "remaining-scrolled";
hdr = $("#header").height();

$(window).scroll(function() {
if( $(this).scrollTop() > hdr ) {
mn.addClass(mns);
} else {
mn.removeClass(mns);
}
});

और आपका प्रभाव प्राप्त होता है। यहाँ एक है लाइव डेमो.

---