सीएसएस: फिक्स्ड पोजीशन के साथ साइडबार

Question

मेरी वेबसाइट में बहुत सी चीजें हैं जिनमें बहुत सी चीजें हैं- ब्राउजर व्यूपोर्ट में स्क्रॉल किए बिना इसे देखने के लिए कम से कम 1020 पिक्सल की ऊंचाई होनी चाहिए (जब तक, ज़ाहिर है, आप ज़ूम आउट)।

मैं साइडबार की स्थिति को ठीक करना चाहता हूं ताकि जब आप बहुत सारी सामग्री वाले पृष्ठ पर हों, तो साइडबार उसी स्थिति में रहता है जब आप स्क्रॉल करते हैं।

div#Sidebar { 
    position: fixed; 
} 

यह रूप में लंबे समय के रूप में ब्राउज़र बड़ा किया गया है क्योंकि मेरी नजर रखने के 1920 x 1200 पर चल रहा है लेकिन अगर मैं अपने ब्राउज़र विंडो का आकार बदलने, साइडबार काट हो जाता है अपने कंप्यूटर पर अच्छी तरह से काम: यह लागू करने के लिए बहुत आसान था । जैसे-जैसे मैं पृष्ठ की सामग्री को स्क्रॉल करता हूं, मैं सभी पेज की सामग्री देख सकता हूं, लेकिन इसकी स्थिति तय होने के कारण साइडबार काट दिया जाता है।

1. साइडबार की स्थिति तय (बुरा) नहीं है, पर उन साइडबार (अच्छा) को देखने के लिए सक्षम होने के लिए अनुमति देते हैं: तो यह मैं केवल दो विकल्प हैं लगता है।

2. साइडबार की स्थिति तय (अच्छी) बनाएं, लेकिन उपयोगकर्ताओं को सभी साइडबार (खराब) को देखने में सक्षम होने की अनुमति न दें।

क्या इन दो विकल्पों को गठबंधन करने का कोई तरीका है?

Answer 1

आप जावास्क्रिप्ट में एक परीक्षण कर सकते हैं। या तो शुद्ध जावास्क्रिप्ट में, या jQuery के साथ (बहुत आसान होगा)

यहाँ jQuery के लिए एक उदाहरण है:

$(window).resize(function() { 
    if ($(window).height() < 800) { 
    $('#Sidebar').addClass('beAbsolute').removeClass('beFixed'); 
    } else { 
    $('#Sidebar').addClass('beFixed').removeClass('beAbsolute'); 
    } 
}); 

सीएसएस:

.beFixed {position:fixed;} 
.beAbsolute {position:absolute;top:0px;} 

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

Answer 2

overflow-y:auto आज़माएं और आकार को कैप करें। मैं इसे 1020 पिक्सल से छोटा कुछ के रूप में कैप करने की अनुशंसा करता हूं, क्योंकि बहुत से लोग छोटी स्क्रीन पर चल रहे हैं (उदाहरण के लिए, मेरा 15 "लैपटॉप, 1366x768 है, इसलिए मैं केवल 3/4 देख सकता हूं) और यहां तक ​​कि उन बड़ी स्क्रीन पर जरूरी नहीं है कि उनकी खिड़कियां अधिकतम करें। अवांछित, लेकिन height:100% काम/काम करना चाहिए।

यह div के लिए एक स्क्रॉल बार जोड़ देगा, इसलिए इसके लिए खाता सुनिश्चित करना सुनिश्चित करें, लेकिन यह div scrollable , जो आपकी समस्या का समाधान करेगा। यह थोड़ी उपयोगिता बलिदान करता है (मुख्य खिड़की के अलावा स्क्रोलबार आमतौर पर फंसे हुए हैं),