粘滯導航欄不工作

我一直在試圖在我的項目中實現一個粘滯的導航欄，但不知何故它不工作。我不能在這裏得到什麼錯誤（PS：它甚至沒有出現在我的小提琴中，但確實顯示在我正在構建的本地文件中。）粘滯導航欄不工作

已使用twitter bootstrap 3.x.什麼可能會出錯？一點幫助將不勝感激。

下面是我執行的代碼：

HTML：

<div class="container-fluid"> 

<h3>this is a title</h3> 

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie posuere justo id condimentum. Morbi eu massa non enim varius lobortis vitae id massa. Aliquam congue consectetur nisi, sit amet tempus nunc mattis at. Aliquam non eleifend quam, ac accumsan urna. Nullam porta metus lacus, aliquam pretium purus rhoncus et. Donec in congue mi. Integer eu massa tincidunt, convallis diam in, ultrices lacus. Nulla bibendum metus sed enim faucibus, vel egestas tortor sollicitudin. Proin bibendum condimentum enim, ac luctus augue gravida et. Proin pretium tortor sed turpis gravida molestie. In hac habitasse platea dictumst.</p> 
</div> 
<div id="navi" class="navbar navbar-inverse visible-md visible-lg" role="navigation"> 
    <ul class="nav navbar-nav"> 
     <li><a href="#">Home</a> 

     </li> 
     <li class="active"><a href="#about">About me</a> 

     </li> 
     <li><a href="#resume">Resume</a> 

     </li> 
     <li><a href="#contact">Contact</a> 

     </li> 
    </ul> 
</div> 
<p>lol Proin auctor turpis ac elit pharetra laoreet. Cras consequat mauris ut condimentum vulputate. Nunc faucibus viverra suscipit. Sed sit amet ante interdum libero malesuada adipiscing sed at erat. Praesent et tristique lorem. Vestibulum lobortis laoreet tortor eget pellentesque. Nam commodo nibh libero, in elementum mi lobortis ut. this is a title Pellentesque interdum, quam sit amet sagittis porttitor, nunc lorem aliquam lorem, varius laoreet lectus diam vel mi. Fusce ut justo a neque vestibulum aliquam ac at ante. Phasellus porttitor mollis semper. Cras ultricies augue augue, non consequat nisi laoreet et. Donec sapien erat, molestie in faucibus ut, dapibus id risus. Morbi nec lorem nulla. Suspendisse potenti. Ut congue purus vel tincidunt facilisis. Cras condimentum lorem a purus lacinia dignissim. Curabitur convallis, leo ut vestibulum feugiat, ante urna ullamcorper ipsum, et aliquam justo sem ac urna. Praesent rhoncus risus nec dignissim ornare. Sed nec tellus nibh. Nulla in mauris ac lorem mollis ultricies id et mauris.</p>

的CSS：

.fixed { 
    position: fixed; 
    top: 0; 
    height: 50px; 
    z-index: 180; 
}

jQuery的

$(document).ready(function(){ 
    $(window).bind('scroll', function() { 
    var navHeight = $(window).height() - 50; 
     if ($(window).scrollTop() > navHeight) { 
     $('#navi').addClass('fixed'); 
     } 
     else { 
     $('#navi').removeClass('fixed'); 
     } 
    }); 
    });

The Fiddle Link

在此先感謝

來源

2014-07-14 Learner Always

如果您使用顯示：塊，你的資產淨值將在中小型設備上突破。參考我的答案。 –

下面的代碼添加到您的css

#navi{ 
display: block!important; 
}

這是因爲在某種程度上引導正在使你的navdisplay:none

Working Code

來源

2014-07-14 07:01:28

非常感謝，但爲什麼在添加課程時不能保持完整的寬度？任何想法 –

@LearnerAlways：只需將'width：100％;'添加到'fixed''類' –

@LearnerAlways：Check this [fiddle]（http://jsfiddle.net/sunil_hari/x84PJ/6/） –

.visible-md和.visible-lg隱藏您的導航欄，因爲使用.visible-md和.visible-lg，您的元素將只在桌面和大型設備（桌面）以及jsfiddle中可見，視口是小。

您可以執行以下操作來顯示您的導航，但如果您的站點在父框架中打開，則不需要。在這裏查看全屏結果中的舊小提琴：http://jsfiddle.net/x84PJ/5/embedded/result/您的導航欄在此處可見。

#navi { display: block !important;} /* use this only for jsfiddle result output, else your nav will break on medium and small devices*/

，並修復您的jQuery代碼

$('nav').removeClass('fixed');

應該

$('#navi').removeClass('fixed');

更多細節上的導航欄試試這個：http://getbootstrap.com/examples/navbar/

來源

2014-07-14 07:06:29

是的，注意到，這是一個愚蠢的錯誤，我糾正了。可見的MD和可見的LG是重要的，他們需要 –

訪問我張貼的網址，你會發現所有的定製。 –

是的，我在玩代碼時注意到了它，因此對我的項目佈局進行了一些更改並解決它:)感謝您的幫助 –

粘滯導航欄不工作

回答

相關問題