एक पूर्ण स्थानांतरित div के अंदर एक निश्चित स्थानांतरित div की आवश्यकता है

Question

मैं स्नैप.जेएस प्लगइन का उपयोग कर रहा हूं - (यह आपको स्क्रॉलिंग साइड ड्रॉर्स/पैनल बनाने की अनुमति देता है)।

यह 3 बिल्कुल स्थित divs बनाकर काम करता है, जिनमें से एक मुख्य सामग्री शामिल है।

खिड़की के शीर्ष पर तय एक div को स्थिति देने का कोई तरीका है जब यह पूरी तरह से स्थित div के अंदर होता है।

फिलहाल मैं बस ब्राउज़र के शीर्ष की बजाय पूरी तरह से स्थित div के शीर्ष पर पिन करने के लिए निश्चित div प्राप्त कर रहा हूं। जब मैं स्क्रॉल करता हूं, तो div मुख्य सामग्री के शीर्ष पर तय रहता है, लेकिन खिड़की नहीं।

उदाहरण के लिए:

<div style="position:absolute;"> 

    <div style="position:fixed;top:0"> 
     <!-- some content which needs to be pinned to top of window --> 
    </div> 

</div> 

पल मैं स्क्रॉल ऑफसेट पर नज़र रखने और मैन्युअल रूप से बच्चे div, जो प्रदर्शन के लिए आदर्श नहीं है के शीर्ष स्थिति को समायोजित करने जावास्क्रिप्ट का उपयोग कर रहा पर।

किसी भी मदद की सराहना की!

Answer 1

मैं अपने जावास्क्रिप्ट वैकल्पिक हल दिखा एक बेला कर दिया है देखते हैं - यह घबराहट जब इंटरनेट एक्सप्लोरर में स्क्रॉल, किसी भी विचार।

<div id="displayed-content" class="snap-content scrollable"> 
    <div><!-- regular content --></div> 
     <div><!-- fixed content --></div> 
    <div><!-- footer content --></div> 
</div> 

http://jsfiddle.net/bxRVT/

Answer 2

मैं आपको बस इतना करना कोशिश कर रहे हैं के बारे में थोड़ा अनुमान लगा रहा हूँ, लेकिन आप कुछ इस तरह की तलाश में हो सकता है:

<div class="local-wrap"> 
    <div class="fixed"> 
     Some content which needs to be pinned to top of window 
    </div> 
    <div class="port"> 
     Regular content... 
    </div> 
</div> 

और निम्नलिखित सीएसएस लागू होते हैं:

.local-wrap { 
    position: relative; 
} 
.local-wrap .fixed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: lightgray; 
    width: 100%; 
    height: 5.00em; 
} 
.local-wrap .port { 
    position: relative; 
    top: 5.00em; 
    min-height: 10em; 
    height: 15em; 
    overflow: auto; 
    border: 1px solid gray; 
    border-width: 0 1px 1px 1px; 
} 

डेमो बेला: http://jsfiddle.net/audetwebdesign/pTJbW/

अनिवार्य रूप से, ब्लॉक तत्व के संबंध में एक निश्चित ब्लॉक प्राप्त करने के लिए, आपको पूर्ण स्थिति का उपयोग करने की आवश्यकता है। फिक्स्ड पोजीशनिंग रूट तत्व या पोर्ट को देखने के संबंध में हमेशा होती है, इसलिए position: fixed आपकी मदद नहीं करेगा।

मैंने जो किया है वह .local-wrap कंटेनर को परिभाषित करता है, जिसमें दो बाल ब्लॉक होते हैं, एक .local-wrap के शीर्ष पर और दूसरा नियमित प्रवाह में स्थित है। मैंने का उपयोग .fixed से नीचे रखने के लिए किया था, लेकिन एक शीर्ष मार्जिन भी काम करेगा।

मैंने स्थानीय खिड़की/बंदरगाह के भीतर स्क्रॉलिंग सामग्री का प्रदर्शन करने के लिए कुछ ऊंचाई तय की, लेकिन इसे आपके डिजाइन और एप्लिकेशन के आधार पर बदला जा सकता है।

अस्वीकरण

मैं तो वहाँ अन्य कारणों पर विचार हो सकता है snap.js से परिचित नहीं हूँ। CSS3 पर

टिप्पणी रूपांतरण और फिक्स्ड तत्वों

CSS3 चश्मा के अनुसार, यदि आप एक एक तत्व को बदलने लागू होते हैं, इसे कहते div.transformed, तो div.transformed एक नया स्टैकिंग संदर्भ बनाता है और के रूप में एक युक्त कार्य करता है किसी निश्चित स्थिति के लिए ब्लॉक करें जिसमें तत्व शामिल हैं, यही कारण है कि आपके परिदृश्य में, निश्चित स्थिति संदर्भ खिड़की के शीर्ष पर नहीं रहता है।

संदर्भ के लिए, Mozilla Developer Network -> CSS Reference -> Transform