ट्विटर बूटस्ट्रैप चिपका नेवबार - div नीचे

Question

बल्कि कठिन समस्या का वर्णन करने के लिए कूदता है। तो बस इस jsFiddle को देखो:

http://jsfiddle.net/xE2m7/

नेवबार शीर्ष करने के लिए तय हो जाता है जब सामग्री यह नीचे कूदता है।

सीएसएस:

.affix { 
    position: fixed; 
    top: 0px; 
} 
#above-top { 
    height: 100px; 
    background: black; 
} 

समस्या कहां है?

Answer 1

समस्या यहाँ कोई रास्ता नहीं एनएवी नीचे कंटेनर कि नेविगेशन बार शीर्ष करने के लिए निर्धारित किया गया है में की शेष सामग्री को नहीं भेजी है कि वहाँ है। आप इस का उपयोग करते हुए और अधिक आधुनिक सीएसएस हासिल कर सकते हैं, लेकिन ध्यान रखें कि यह पुराने ब्राउज़र के लिए एक ठीक नहीं होगा हो (और वास्तव में वहाँ मुद्दों आप स्थिति के साथ हो सकते हैं: बहुत पुराने ब्राउज़र में तय गुण ...

.affix + .container { 
    padding-top:50px 
} 

यह इंतजार कर रहा है जब तक नेविगेशन बार तय हो गई है, और फिर कंटेनर कि है यह भाई है, एनएवी के तहत "कूद" से यह रखने के लिए गद्दी कहते हैं

Answer 2

मेरे समाधान, @ niaccurshi के से प्रेरित:।

के बजाय हार्ड-कोड एक गद्दी-टॉप, एक अदृश्य नकली तत्व यह है कि अंतरिक्ष का एक ही राशि लेता है, लेकिन केवल जबकि मूल तत्व चिपका है पैदा करते हैं।

जे एस:

var $submenu = $(".submenu"); 

// To account for the affixed submenu being pulled out of the content flow. 
var $placeholder = $submenu.clone().addClass("affix-placeholder"); 
$submenu.after($placeholder); 

$submenu.affix(…); 

सीएसएस:

.affix-placeholder { 
    /* Doesn't take up space in the content flow initially. */ 
    display: none; 
} 

.affix + .affix-placeholder { 
    /* Once we affix the submenu, it *does* take up space in the content flow. But keep it invisible. */ 
    display: block; 
    visibility: hidden; 
} 

Answer 3

एक वैकल्पिक, यदि आप डुप्लिकेट सामग्री से बचना चाहते हैं।

<script> 
    jQuery(document).ready(function(){ 
     jQuery("<div class='affix-placeholder'></div>").insertAfter(".submenu:last"); 
    }); 
</script> 

<style> 
.affix-placeholder { 
    display: none; 
} 
.affix + .affix-placeholder { 
    display: block; 
    visibility: hidden; 
    height: /* same as your affix element */; 
    width: 100%; 
    overflow: auto; 
} 
</style> 

Answer 4

तुम भी बूटस्ट्रैप घटनाओं चिपका उपयोग कर सकते हैं जोड़ने के लिए और गद्दी (या मार्जिन) प्रासंगिक तत्व से दूर करने के लिए सीएसएस वर्गों के माध्यम से:

// add padding or margin when element is affixed 
$("#navbar").on("affix.bs.affix", function() { 
    return $("#main").addClass("padded"); 
}); 

// remove it when unaffixed 
$("#navbar").on("affix-top.bs.affix", function() { 
    return $("#main").removeClass("padded"); 
}); 

यहाँ एक JSFiddle है: http://jsfiddle.net/mumcmujg/1/