ट्विटर बूटस्ट्रैप का उपयोग कर एक चिपचिपा navbar बनाना?

Question

मैं एक नौसेना पेश करने की कोशिश कर रहा हूं, जो अब नहीं देखेगा, फिर निश्चित हेडर पोजिशनिंग को गोद लेगा। मैंने इस धागे का उपयोग करके शुरू किया: Replicating Bootstraps main nav and subnav।

तब से, मैं यहां पहुंचा हूं: http://jsfiddle.net/yTqSc/2/।

समस्या:

लंगर लिंक अपने लक्ष्य लक्ष्य के पार चले होगा (उसमें गंतव्य शीर्षक छुपा) जब भी नेवबार अपनी मूल स्थिति में है, लेकिन एक बार यह तय हो गई है नहीं। मैं ओवरहूट को ठीक कर सकता हूं (मैंने http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/ को संदर्भित किया है), लेकिन फिर जब मैं नेबर को ठीक करता हूं तो लिंक का उपयोग करके अत्यधिक अंतर के साथ समाप्त होता हूं।

कोई भी सलाह दे सकता है कि कैसे नवाबार तय किया गया है या नहीं, इसके बावजूद लगातार परिणाम प्राप्त करने के लिए?

धन्यवाद।

Answer 1

क्या आप यह देख रहे हैं?

<div class="navbar navbar-fixed-top"> 

Answer 2

आपके पास navbar-fixed-top के लिए कोई सीएसएस नहीं है। साथ ही, जब आप बैक अप लेते हैं तो आपको संभालने की आवश्यकता होती है।

देखें डेमो http://jsfiddle.net/yTqSc/39/

जावास्क्रिप्ट

$(document).scroll(function(){ 
var elem = $('.subnav'); 
if (!elem.attr('data-top')) { 
    if (elem.hasClass('navbar-fixed-top')) 
     return; 
    var offset = elem.offset() 
    elem.attr('data-top', offset.top); 
} 
if (elem.attr('data-top') <= $(this).scrollTop()) 
    elem.addClass('navbar-fixed-top'); 
else 
    elem.removeClass('navbar-fixed-top'); 
}); 

सीएसएस

.subnav { 
    background:#FFF; 
} 
.navbar-fixed-top { 
    position:fixed; 
} 

या चिपचिपा तत्वों को संभालने के लिए वेपाइंट jQuery प्लगइन का उपयोग।

Answer 3

यह अच्छा था, लेकिन मैं बजाय शीर्ष तल पर चिपचिपा एनएवी लागू करने के लिए पागल हो गया है, इस तरह: http://golkhaneh.tv3.ir/

कि कैसे कर सकते हैं?