स्थिति फिक्स्ड - क्षैतिज स्क्रॉल

Question

मेरे पास एक बाएं लंबवत साइड बार है कि जब उपयोगकर्ता लंबवत स्क्रॉल करता है, तो साइड बार उपयोगकर्ता के साथ लंबवत स्क्रॉल करता है। हालांकि जब खिड़की बहुत छोटी हो तो उपयोगकर्ता क्षैतिज स्क्रॉल करता है, लंबवत साइड बार विंडो के साथ स्लाइड करता है। मैं साइड बार को क्षैतिज स्क्रॉल करने से कैसे रोकूं लेकिन साइड बार को लंबवत उपयोगकर्ता के साथ स्क्रॉल करने की इजाजत देता हूं।

और मैं यह नहीं करना चाहता।

overflow: hidden; 

मैं चाहता हूँ उपयोगकर्ता क्षैतिज स्क्रॉल करने की क्षमता है, लेकिन मैं सिर्फ साइड बार अपने साथ आने के लिए चाहते हैं के रूप में।

इस

मेरी जावास्क्रिप्ट है:

$(document).ready(function(){ 
    var top = $("#sidebar").offset().top; 
    $(window).scroll(function(){ 
     var y = $(window).scrollTop(); 
     if (y >= top) { 
      $("#sidebar").addClass('fixed'); 
     } else { 
      $("#sidebar").removeClass('fixed'); 
     } 
    }); 
}); 

और मेरे सीएसएस है:

#sidebar { 
    position: absolute; 
    height: 100%; 
    min-width: 100px; 
    width: 100px; 
    overflow: hidden; 
    background-color: #ededed; 
    border-right: 1px solid #aaa 
    } 
#sidebar.fixed { 
    position: fixed; 
    height:100%; 
    top: 0%; 
    z-index: 1; 
} 

Answer 1

तो तय हो सकता है गलत appoach है।

सैद्धांतिक रूप से आप .scroll सुविधा का उपयोग शीर्ष शीर्ष स्थिति में तत्वों को अद्यतन करने के लिए कर सकते हैं, यदि शीर्ष परिवर्तन हो, लेकिन बाएं संपत्ति में परिवर्तन होने पर स्क्रॉल ईवेंट को अनदेखा करें।

कृपया इस छोटे और बहुत सरल उदाहरण को देखें। http://jsfiddle.net/Hbkdt/

नोटिस: आप इसे एनिमेट फीचर के साथ जोड़ सकते हैं, और विंडो ईवेंट को डिबॉउशन कर सकते हैं, ताकि यह केवल हर 30-50 मिलीसेकंड को आग लगाए और फिर मानों को अपडेट करे।

एनिमेटेड और debounced उदाहरण: http://jsfiddle.net/Hbkdt/1/