粘性导航栏不起作用

Question

我一直在尝试在我的项目中实现粘性导航栏，但不知何故它无法正常工作。 我无法理解这里的错误（PS：它甚至没有显示在我的小提琴中，但确实显示在我正在构建的本地文件中。）

一直在使用twitter bootstrap3.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');
       }
    });
  });

小提琴链接

提前致谢

Answer 1

将以下代码添加到css

#navi{
 display: block!important;
}

这是因为以某种方式引导使您的nav display:none

工作守则

Answer 2

.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/