导航栏在滚动后在顶部修复

我想让我的导航栏在顶部滚动一定数量的像素后固定在顶部。我从现有的类似问题中得到了这个JQ片段，但它对我不起作用。我是否将它绑定到正确的div上？有没有办法独自使用Bootstrap来做到这一点？只是想说明我想要的东西，它是这个小提琴（不是我）：http://jsfiddle.net/jpXjH/6/导航栏在滚动后在顶部修复

<div id="nav-wrapper"><!--nav-wrapper--> 
     <div class="container"><!--container--> 
      <div class="row" id="navigation"><!--header--> 
       <div class="col-md-12"><!--col-md-12--> 
        <div class="nav"><!--nav--> 
         <div class="#"><ul id="#"><li id="#" class="..."><a href="...">Home</a></li> 
    <li id="menu-item-6478" class="..."><a href="...">About EFTI</a></li> 
    <li id="menu-item-27" class="..."><a href="...">Our Coaches</a></li> 
    <li id="menu-item-6469" class="..."><a href="...">Blog</a></li> 
    <li id="menu-item-6568" class="..."><a href="...">EFTI Forum</a></li> 
    <li id="menu-item-6477" class="..."><a href="...">Contact Us</a></li> 
    </ul></div>    </div><!--nav--> 
       </div><!--col-md-12--> 
       <div class="clearfix"></div> 
      </div><!--header--> 
     </div><!--container--> 
    </div>

JS：

$(function() { 
    var elementPosition = $('.col-md-12').offset(); 

    $(window).scroll(function(){ 
     if($(window).scrollTop() > elementPosition.top){ 
      $('.col-md-12').css({'position':'fixed','top':'0'}); 
     } else { 
      $('.col-md-12').css('position','static'); 
     }  
    }); 
});

来源

2014-10-30 Dimoff

引导可以做到这一点。他们打电话给'贴'。检查他们网站上的JavaScript部分的文档。 – Malk 2014-10-30 22:27:08

谢谢，我会试试看。然而，我的JS有什么不对吗？ – Dimoff 2014-10-30 22:29:00

为什么不使用新position:sticky，这将是CSS4的一部分，which can easily be polyfilled到与现有的浏览器一起工作？

来源

2014-10-30 22:31:31 user1429980

谢谢，我将不得不研究那个，不能马上实施。任何想法我的JS代码有什么问题？ – Dimoff 2014-10-30 22:32:38

我的网站使这个功能（IDS已调整）：

var headerHeight = $('#header').outerHeight(); 
$(window).scroll(function() { 
    var headerPos = $('#header').offset().top; 
    if ($(window).scrollTop() > headerPos + headerHeight) { 
     $('#nav-wrapper').css("top", "0"); 
    } else $('#nav-wrapper').css("top", headerPos + headerHeight - $(window).scrollTop()); 
});

现场演示：http://jsfiddle.net/p86zvs3z/2/

来源

2014-12-20 12:34:35 Dennis98

导航栏在滚动后在顶部修复

回答

相关问题