बूटस्ट्रैप में ब्राउज़र के शीर्ष पर स्क्रॉलिंग नवबार स्टिक बनाएं

Question

मैं ट्विटर बूटस्ट्रैप में नया हूं और एक गहरी मास्टहेड के नीचे एक नवबार रखना चाहता हूं और जब उपयोगकर्ता लंबवत पृष्ठ को स्क्रॉल करता है और NavBar शीर्ष पर जाता है पृष्ठ का, शैली को बदलने के लिए ताकि NavBar फिक्स्ड हो जाए। मैं चाहता हूं कि प्रभाव केवल बूटस्ट्रैप NavBar का उपयोग कर http://www.happycog.com/ जैसा ही है।

तो, असली सवाल यह है कि Navbar को स्थिति 0 पर स्क्रॉल करने पर Navbar- निश्चित-शीर्ष शैली को कैसे ट्रिगर करना है यानी ब्राउज़र का शीर्ष।

किसी भी विचार या पॉइंटर्स की सराहना की जाएगी। धन्यवाद।

Answer 1

आपको ऐसा करने के लिए जावास्क्रिप्ट का उपयोग करना होगा। यहां एक समाधान है जो नेविबार पोजिशनिंग को पृष्ठ के शीर्ष पर पहुंचने के साथ-साथ लेआउट को बदलने से रोकने के लिए अपने स्थान पर एक अस्थायी div चिपकाने के लिए jQuery पर निर्भर करता है।

http://jsfiddle.net/T6nZe/

Answer 2

आप कोशिश कर सकते हैं CSS3 के चिपचिपा स्थिति:

.sticky { 
    position: sticky; 
    top: 10px; /* When the element reaches top: 10px, it becomes fixed. */ 
    z-index: 100; 
} 

ब्राउज़र समर्थन: http://caniuse.com/#feat=css-sticky

Answer 3

ब्राउज़र संगतता के लिए लक्ष्य है, तो निम्न अधिक काम का हो सकता है।

.sticky { 
    position: -webkit-sticky; 
    position: -moz-sticky; 
    position: -ms-sticky; 
    position: -o-sticky; 
    position: sticky; 
    top: 10px; 
    z-index: 100; 
} 

Answer 4

सीएसएस वर्ग navbar-fixed-top वह है जिसे आप जोड़ना चाहते हैं।

यहाँ एक उदाहरण है:

<nav class='navbar navbar-inverse navbar-fixed-top sticky' role='navigation'> 
    <!-- nav content --> 
</nav> 

Answer 5

मेरा मानना ​​है कि यह आपके लिए क्या देख रहे है: http://www.w3schools.com/bootstrap/bootstrap_affix.asp