यह निम्न में से एक बदलाव की तरह है के बाद एक निश्चित div स्क्रॉल करने के लिए है, लेकिन थोड़ा अलग: How do I get a fixed position div to scroll horizontally with the content? Using jQueryjQuery - कैसे क्षैतिज खड़ी स्क्रॉल
यहाँ मेरी भिन्नता है: http://jsfiddle.net/Bdwc4/
असल में, मैं करूंगा div के बहुत दूर दाईं ओर "x" देखने में सक्षम होना पसंद है, और ऐसा करने के लिए, div पूर्ण होना चाहिए। लेकिन साथ ही, लंबवत स्क्रॉल करते समय मुझे div को निश्चित करने की आवश्यकता होती है। दूसरे शब्दों में, आपको लंबवत या क्षैतिज स्क्रॉल करते समय हमेशा उस निश्चित स्थिति में "x" को देखने में सक्षम होना चाहिए। यह वही करता है जो मैं करना चाहता हूं, लेकिन केवल तभी जब आप खिड़की के शीर्ष पर हों। मैं क्षैतिज स्क्रॉल करने में सक्षम होना चाहता हूं, भले ही आप लंबवत स्क्रॉल करते हैं।
<style>
.scroll_fixed {
left:500px;
position:absolute
}
.scroll_fixed.fixed {
position:fixed
}
.x { float:right }
.foo { background-color: red; width: 150px; height:150px; left:500px }
body { width: 500px }
.header { margin-top: 100px }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(window).scroll(function(event) {
var x = 0 - $(this).scrollLeft();
var y = $(this).scrollTop();
// whether that's below the form
if (y) {
// if so, ad the fixed class
$('.scroll_fixed').addClass('fixed');
} else {
// otherwise remove it
$('.scroll_fixed').removeClass('fixed');
}
});
</script>
<div class="header"></div>
<div class="scroll_fixed foo"><div class="x">x</div></div>
<div>
Enter a very long string of text
</div>
आप कोड में दर्ज करने के बाद, जब तक "x" क्षैतिज और खड़ी ब्राउज़र विंडो हटना में:
आप ऊपर jsfiddle उपयोग करने के लिए नहीं चुनते हैं, यहाँ कोड मैं का उपयोग कर रहा है लाल बॉक्स दृश्य से बाहर है, जो आपको इसे देखने के लिए क्षैतिज स्क्रॉल करने के लिए मजबूर करेगा, और जब आप लंबवत स्क्रॉल करते हैं, तो लाल बॉक्स निश्चित स्थिति में होना चाहिए।
हाँ देखो! यही वह है जिसकी तलाश में मैं हूं! अच्छा लगता है, और धन्यवाद! –