मैं कैसे तय करूं कि मेरी निश्चित नौसेना बार मुझे कहाँ ले जाती है?

Question

मेरे पास मेरी वेबसाइट पर एक निश्चित नेविगेशन बार है जो शीर्ष पर रहता है जो मुझे पृष्ठ के नीचे अलग-अलग अनुभागों में ले जाता है। हालांकि, क्योंकि मेरे निश्चित नौसेना बार की ऊंचाई 40 पीएक्स है, इसलिए प्रत्येक खंड की शुरूआत 40 पीएक्स है। एचटीएमएल या सीएसएस का उपयोग करके 40px तक मेरे लिंक मुझे कहां ले जाएंगे? धन्यवाद।

Answer 1

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

उदाहरण HTML:

<div class="navbar"> 
    <a href="#anchor1">Anchor 1</a> 
    <a href="#anchor2">Anchor 2</a> 
    <a href="#anchor3">Anchor 3</a> 
</div> 
<div class="section"> 
    <span id="anchor1" class="anchor"></span> 
    Section Content 
</div> 
<div class="section"> 
    <span id="anchor2" class="anchor"></span> 
    Section Content 
</div> 
<div class="section"> 
    <span id="anchor3" class="anchor"></span> 
    Section Content 
</div>​ 

उदाहरण सीएसएस:

body { 
    padding-top: 40px; 
} 
.navbar { 
    position: fixed; 
    width: 100%; 
    height: 40px; 
    top: 0; 
    left: 0; 
    z-index: 10; 
    border-bottom: 1px solid #ccc; 
    background: #eee; 
} 
.section { 
    position: relative; 
} 
.anchor { 
    display: block; 
    position: absolute; 
    width: 0; 
    height: 0; 
    z-index: -1; 
    top: -40px; 
    left: 0; 
    visibility: hidden; 
} 

एक काम उदाहरण के लिए, को देखने के http://jsfiddle.net/HV7QL/

संपादित करें: CSS3 भी :target छद्म वर्ग, लागू होता है जिसमें शामिल एक तत्व के लिए जिसका idद्वारा संदर्भित किया गया है दस्तावेज़ में एक लिंक के, या यूआरएल के हैश मान। आप :target के शीर्ष पर 40-पिक्सेल पैडिंग लागू कर सकते हैं जो केवल उस अनुभाग पर लागू होगा जिसे उपयोगकर्ता निश्चित नेविबार से चुनता है।

उदाहरण सीएसएस:

.section:target { 
    padding-top: 40px; 
} 

इस विधि ऊपर वर्णित से शब्दार्थ क्लीनर है, लेकिन पुराने ब्राउज़र पर काम नहीं करेगा।

कार्य उदाहरण: http://jsfiddle.net/5Ngft/

Answer 2

मैं सिर्फ इस समस्या को अपने आप को आज तो मैं पहले से ही एक बिट के लिए इस बारे में सोच कर दिया गया था को भूल गए हैं करने के लिए हुआ था, लेकिन मुझे लगता है कि मैं सिर्फ एक समाधान नहीं मिला:

तत्व है कि आप कूद करना चाहते करने के लिए एक padding-top: 40px; margin-top: -40px जोड़े सेवा मेरे। ऋणात्मक मार्जिन पैडिंग को रद्द करता है, लेकिन ब्राउज़र अभी भी सोचता है कि तत्व का शीर्ष वास्तव में 40px से अधिक है (क्योंकि वास्तव में, केवल इसकी सामग्री कम हो जाती है)।

दुर्भाग्यवश, यह पहले से सेट मार्जिन और पैडिंग के साथ टकरा सकता है, और यदि आप लक्षित तत्व पर पृष्ठभूमि का उपयोग कर रहे हैं तो यह सब गड़बड़ कर रहा है।

हूँ यदि मैं उस को हल करने के लिए और एक jsfiddle पोस्ट कर सकते हैं, लेकिन इस बीच यहाँ एक बुनियादी सवाल का जवाब कम से कम :)

संपादित देखेंगे: मैंने सोचा कि मैं पृष्ठभूमि के लिए एक समाधान था, लेकिन यह काम नहीं किया। फिर से हटा दिया गया।

अंतिम संपादन: यदि आप रैपिंग तत्व के पृष्ठभूमि रंग को जानते हैं तो यह काम करता है। मेरे उदाहरण में मुझे पता है कि टेक्स्ट एक सफेद पृष्ठभूमि पर है, लेकिन शीर्षकों में चांदी की पृष्ठभूमि है। अतिरिक्त गद्दी हम सेट पर एक पृष्ठभूमि होने से शीर्षक रोकने के लिए, के बजाय मैं इसे एक छद्म तत्व पर डाल यह पहले:

#three:before { 
    content: " "; 
    background: white; 
    display: block; 
    margin-top: -40px; 
    padding-top: 40px; 
} 

इस तरह अतिरिक्त गद्दी एक सफेद पृष्ठभूमि फिर से है, लेकिन यह केवल काम करता है अगर आप पहले से ही जानते हैं कि इसकी पृष्ठभूमि क्या है। उदाहरण के लिए इसे पारदर्शी में सेट करना लेख की नहीं, शीर्षक की अंतर्निहित पृष्ठभूमि दिखाएगा।

जेएसफ़िल्ड: http://jsfiddle.net/Lzve6/ शीर्षक एक डिफ़ॉल्ट है जिसमें आपको समस्या है। शीर्षक दो मेरा पहला समाधान है, लगभग सभी ब्राउज़रों पर काम करने की गारंटी शीर्षक तीन :before छद्म-तत्व का उपयोग कर रहा है, शायद older browsers पर काम नहीं कर सकता है।