सीएसएस: क्षैतिज तत्व को कैसे ठीक करें लेकिन लंबवत नहीं है?

Question

आप यहां एक उदाहरण देख सकते हैं: http://alboard.free.fr/adrien/test.html

लेआउट क्षैतिज स्क्रॉलिंग (लाल तत्व) पर आधारित है। लेकिन मैं शीर्ष भाग को तय करना चाहता हूं (नीला तत्व)।

यदि उपयोगकर्ता व्यूपोर्ट का आकार बदलता है, तो एक लंबवत स्क्रॉलबार दिखाई देगा। यदि इस बिंदु पर उपयोगकर्ता नीचे स्क्रॉल करता है, तो लाल तत्व ऊपर जाएगा जबकि नीला तत्व स्थिर रहेगा। यह लेआउट तोड़ता है (लाल तत्व नीले तत्व के साथ ओवरलैप करता है)।

क्या ब्लू तत्व क्षैतिज रूप से तय करना संभव है लेकिन लंबवत स्क्रॉल करने योग्य है?

मुझे पता है कि ऑनस्क्रॉल के आधार पर जावास्क्रिप्ट समाधान हैं। लेकिन उपयोगकर्ता स्क्रॉल के पल के बीच हमेशा विलंब होता है और जिस क्षण तत्व की स्थिति नए ऑफसेट पर आती है।

Answer 1

जब तक आपके पास बहुत आपके # निश्चित-तत्व के अंदर जटिल सामग्री है, तो जावास्क्रिप्ट ऑनस्क्रोल हैंडलर ठीक काम करेगा।

<script type="text/javascript"> 
    function handleScroll() 
    { 
     document.getElementById('fixed-element').style.top = "-"+document.body.scrollTop+"px"; 
    } 
    </script> 

इसे आज़माएं और देखें कि यह आपकी सामग्री के लिए काम करता है या नहीं। जैसा कि माइक ने कहा, मुझे नहीं लगता कि ऐसा करने के लिए एक सीएसएस एकमात्र तरीका है। divs की दो पंक्तियों के एक माता पिता div अंदर

नेस्ट:

Answer 2

जावास्क्रिप्ट का उपयोग के बिना, आप नेस्टेड divs अतिप्रवाह गुणों के साथ उपयोग कर सकते हैं। आपकी क्षैतिज स्क्रॉलबार आपके निचले नेस्टेड div से होनी चाहिए (आपके शीर्ष नेस्टेड div में कोई क्षैतिज स्क्रॉलबार नहीं होना चाहिए)। आपका लंबवत स्क्रॉलबार आपके मूल div से होगा (आपके नेस्टेड divs में कोई लंबवत स्क्रॉलबार नहीं होगा)।

फिर, अगर कोई लंबवत स्क्रॉल करता है, तो दोनों नेस्टेड divs स्क्रॉल करेंगे। अगर कोई क्षैतिज स्क्रॉल करता है, तो केवल आपका निचला घोंसला वाला div स्क्रॉल करेगा (शीर्ष नेस्टेड div निश्चित दिखाई देगा)।