एक "स्थिति: सापेक्ष" कंटेनर डिव

Question

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

यह div "स्थिति: सापेक्ष" div के भीतर होना चाहिए।

मुझे यकीन है कि एक div के अलग-अलग धुरी को अलग-अलग पदों को आवंटित करने का कोई तरीका नहीं है लेकिन यह प्रभाव का वर्णन करने का सबसे अच्छा तरीका है जिसे मैं प्राप्त करने की उम्मीद कर रहा हूं।

मेरे पास अब तक यह है, जो मूल रूप से एक सापेक्ष div के भीतर एक निश्चित div है।

सीएसएस

#container { 
position:relative; 
width:700px; 
height:1000px; 
top:50px; 
left:50px; 
background-color:yellow; 
} 

#blue-box{ 
position:fixed; 
width:100px; 
height:100px; 
background-color:blue; 
margin-top:20px; 
margin-left:400px; 
{ 

एचटीएमएल

<div id="container"> 
<div id="blue-box"></div> 
</div> 

मैं भी एक jsFiddle बनाया है समस्या का प्रदर्शन में मदद करेगा।

यह लंबवत के लिए ठीक काम करता है, लेकिन यदि आप अपने वेब ब्राउज़र का आकार बदलते हैं तो यह पीले रंग के बॉक्स (कंटेनर) से संकुचित है और फिर क्षैतिज स्क्रॉल करें, नीला बॉक्स पृष्ठ के साथ आगे बढ़ेगा। मैं ऐसा होने से रोकने की उम्मीद कर रहा हूं।

यदि सीएसएस के माध्यम से इसे प्राप्त करने का कोई तरीका नहीं है, तो जब तक यह सभी आधुनिक ब्राउज़रों और आईई 7 और आईई 8 दोनों के साथ काम करता है, तब तक जावास्क्रिप्ट का उपयोग करने में मुझे पूरी खुशी है। (यही कारण है कि मैंने जावास्क्रिप्ट टैग जोड़ा है)

क्या कोई मेरी मदद कर सकता है?

Answer 1

JQuery के साथ, दस्तावेज़ की scrollLeft() संपत्ति का उपयोग करें! यह काम करेगा

$(window).scroll(function(event) { 
    $("#blue-box").css("margin-left", 400-$(document).scrollLeft()); 
}); 

भी देखें

http://jsfiddle.net/zhQkq/9/

गुड लक!

संपादित करें: आप इसे अपने पूर्व निर्धारित मार्जिन छोड़ दिया एक हार्ड-कोडेड "400" के बजाय का उपयोग करना चाहते हैं, तो का उपयोग

$(window).scroll(function(event) { 
    $("#blue-box").css("margin-left", $("#blue-box").css("margin-left")-$(document).scrollLeft()); 
}); 

Answer 2

यहाँ मेरी समाधान (ओपेरा और Firefox में परीक्षण किया गया) है: http://jsfiddle.net/cCH2Z/2 चाल right: 0px; निर्दिष्ट करने के लिए है, इस विंडो के दाईं बॉर्डर से बॉक्स 0px स्थिति होगी।