सामग्री के साथ क्षैतिज स्क्रॉल करने के लिए मुझे एक निश्चित स्थिति div कैसे प्राप्त करें? jQuery

Question

का उपयोग मैं निम्नलिखित सीएसएस

.scroll_fixed { 
    position:absolute 
    top:210px 

} 
.scroll_fixed.fixed { 
    position:fixed; 
    top:0; 
} 

मैं निम्नलिखित jQuery कोड का उपयोग कर रहा है जब div पेज के शीर्ष तक पहुँच जाता है .fixed वर्ग सेट करने के लिए के साथ एक div.scroll_fixed है।

var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0)); 

$(window).scroll(function (event) { 
    // what the y position of the scroll is 
    var y = $(this).scrollTop(); 

    // whether that's below the form 
    if (y >= top) { 
     // if so, ad the fixed class 
     $('.scroll_fixed').addClass('fixed'); 
    } else { 
     // otherwise remove it 
     $('.scroll_fixed').removeClass('fixed'); 
    } 
}); 

यह लंबवत स्क्रॉल फिक्सिंग के लिए बहुत अच्छा काम करता है। लेकिन एक छोटी ब्राउज़र विंडो के साथ, क्षैतिज स्क्रॉलिंग इस निश्चित div के दाईं ओर सामग्री के साथ एक संघर्ष का कारण बनता है।

मैं div को क्षैतिज सामग्री के साथ स्क्रॉल करना चाहता हूं।

क्या कोई मुझे सही दिशा में इंगित कर सकता है। अभी भी मेरे पैर जेएस/JQuery के साथ गीला हो रही है।

मैं मूल रूप से इसे example में दूसरे बॉक्स की तरह काम करना चाहता हूं।

Answer 1

डेमो तत्व के position:fixed रखने और तत्व की left संपत्ति से छेड़छाड़ कर रहा है:

var leftInit = $(".scroll_fixed").offset().left; 
var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0)); 


$(window).scroll(function(event) { 
    var x = 0 - $(this).scrollLeft(); 
    var y = $(this).scrollTop(); 

    // whether that's below the form 
    if (y >= top) { 
     // if so, ad the fixed class 
     $('.scroll_fixed').addClass('fixed'); 
    } else { 
     // otherwise remove it 
     $('.scroll_fixed').removeClass('fixed'); 
    } 

    $(".scroll_fixed").offset({ 
     left: x + leftInit 
    }); 

}); 

leftInit का उपयोग करते हुए खाते में एक संभव बाईं मार्जिन लेता है। इसे आजमाएं: http://jsfiddle.net/F7Bme/

Answer 2

आप शायद अब तक चले गए हैं, लेकिन यहां किसी और के लिए एक क्षैतिज स्क्रॉल करने योग्य निश्चित तत्व समाधान की तलाश है। यह jquery प्लगइन इस सटीक समस्या को हल करने के लिए बनाया गया था।

यह डेमो एक शॉपिंग कार्ट सारांश का उपयोग करता है जो पृष्ठ के शीर्ष पर तय होने पर क्षैतिज रूप से स्क्रॉल करेगा;

डेमो:: http://jsfiddle.net/y3qV5/434/ (अद्यतन)

प्लगइन और स्रोत: https://github.com/bigspotteddog/ScrollToFixed

उपयोग:

$(document).ready(function() { 
    $('#cart').scrollToFixed({ marginTop: 10 }); 
}); 

Answer 3

उपयोग सीएसएस संपत्ति position:sticky और, मैं भी सारणीबद्ध डेटा के ऊपर एक शीर्ष लेख में इसका उपयोग किया इसे पाने के लिए।

यहां आलेख समझाया गया है और लाइव डेमो है।

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

केवल दोष यह ब्राउज़र संगतता है।