स्क्रॉलिंग कंटेनर

Question

के अंदर सीएसएस स्थिति तत्व "निश्चित" मुझे आश्चर्य है कि किसी को इसके लिए कोई समाधान मिला है या नहीं?

मैं एक स्क्रॉल कंटेनर के शीर्ष करने के एक तत्व संलग्न करने के लिए एक समाधान के लिए देख रहा हूँ

HTML:

<div class="container"> 
    <div class="header">title</div> 
    <div class="element">......</div> 
    ... (about 10-20 elements) ... 
    <div class="element">......</div> 
</div> 

सभी "तत्वों" position:relative है,

कंटेनर निम्नलिखित है सीएसएस:

.container { 
    position:relative; 
    width:200px; 
    height:400px; 
    overflow-y:scroll; 
} 

मैं शीर्ष पर शीर्ष पर रहना चाहता हूं कंटेनर, इसकी स्क्रॉलिंग स्थिति से स्वतंत्र और नीचे स्क्रॉल तत्व।

सीएसएस अब तक:

.header { 
    position:absolute; /* scrolling out of view :-(*/ 
    z-index:2; 
    background-color:#fff; 
} 
.element{ 
    position: relative; 
} 

सभी तत्वों को ब्लॉक तत्व हैं, और मैं कंटेनर के बाहर हैडर स्थानांतरित नहीं कर सकते। jquery इस बिंदु पर कोई विकल्प नहीं है।

Answer 1

इस मामले में समाधान स्क्रॉल तत्व के बाहर शीर्षक पॉप होगा:

<div class="header">title</div> 
<div class="container"> 
    <div class="element">......</div> 
    <div class="element">......</div> 
</div> 

यद्यपि आप शायद बेहतर अर्थ तत्व होना चाहिए संभव (बस यहाँ अनुमान लगा) यदि:

<h3>title</h3> 
<ul> 
    <li>......</li> 
    <li>......</li> 
</ul> 

Answer 2

jQuery UI ने इस उद्देश्य के लिए केवल position() उपयोगिता विधि जोड़ा जो आपके जीवन को आसान बना देगा।

$("#someElement").position({ 
    of: //Element to position against, 
    my: //which position on the element being positioned, 
    at: //which position on the target element eg: horizontal/vertical, 
    offset: // left-top values to the calculated position, eg. "50 50" 
}); 

निश्चित रूप से मेरी मदद की।

Answer 3

मुझे लगता है कि आपका समाधान position:sticky के साथ पास हो गया है। ऐसा लगता है कि यह position:fixed जैसा है लेकिन उसके माता-पिता को सापेक्ष स्थिति का सम्मान करता है।

दुर्भाग्यवश यह एक प्रयोगात्मक विशेषता है, और केवल क्रोमियम में ही समर्थित है। आप this test page में अधिक जानकारी देख सकते हैं।

शुद्ध सीएसएस समाधान जो मेरे दिमाग में आता है मार्कअप के थोड़ा बदलाव के साथ है। आप केवल इस रूप में "तत्वों" के लिए एक कंटेनर सेट कर सकते हैं:

<div class="cont_elements"> 
     <div class="element">......</div> 
     ..... 
</div> 

और यह आंतरिक कंटेनर के लिए अतिप्रवाह दे। अब, आपका हेडर शीर्ष पर चिपक जाता है।

Here's a working demo।