導航欄在滾動後在頂部修復

我想讓我的導航欄在頂部滾動一定數量的像素後固定在頂部。我從現有的類似問題中得到了這個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

導航欄在滾動後在頂部修復

回答

相關問題