將導航欄修復到頂部，一旦它被滾動到

我希望我的導航欄只在到達頂部後才固定到頂部，而不是默認（如class =「navbar-fixed-top」）。 Bootstrap詞綴不適用於我，所以我決定找到一個JQuery獨奏。 Demo of what I want 將導航欄修復到頂部，一旦它被滾動到

HTML：

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

代碼會類似這樣做的工作：

$(window).bind("scroll", function(){ 
var div_pos_from_top = $('#nav').offset().top - $(window).scrollTop(); 

if (div_pos_from_top < 300) { 
$('#nav').css('... , ...'); 
} else { 
$('#nav').css('... , ....'); 
} 
});

來源

2014-10-31 Dimoff

我不熟悉，但可能實際上只是設置導航欄的CSS「位置」屬性的解決方案是固定的嗎？（一旦你滾動到所需的點） – briosheje 2014-10-31 14:21:13

你爲什麼不嘗試它，找出？ – JakeParis 2014-10-31 14:22:24

說實話，我不知道如何把它放在循環中。 $（＃nav）.css（'position'，'fixed'）會起作用嗎？ – Dimoff 2014-10-31 14:25:16

不是最有效的循環。將var放在外面，以便在文檔加載時獲得位置。但這是我發現的最好方式，至少如果你要自己寫點東西的話。希望有所幫助！

您的代碼有nav作爲一個類，它需要設置爲一個id。

var position = $("#nav").offset().top; 
 

 
function stickyHeader() { 
 
    if (position < $(document).scrollTop()) { 
 
    $("#nav").addClass("sticky"); 
 
    } else { 
 
    $("#nav").removeClass("sticky"); 
 
    } 
 
} 
 

 
$(window).scroll(function() { 
 
    stickyHeader(); 
 
});

#nav { 
 
    width: 100%; 
 
    height: 40px; 
 
    background: yellow; 
 
    line-height: 40px; 
 
    transition: all 1s ease-in-out; 
 
} 
 
#nav ul li { 
 
    display: inline-block; 
 
} 
 
.sticky { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<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 id="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--> 
 

 
    <body> 
 
     <h1>Scrolling Sticky Header</h1> 
 

 
     <div class="content"> 
 
     <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem 
 
      quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam 
 
      eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit 
 
      qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p> 
 
     </div> 
 
     <div class="content"> 
 
     <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem 
 
      quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam 
 
      eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit 
 
      qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p> 
 
     <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem 
 
      quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam 
 
      eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit 
 
      qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p> 
 
     </div> 
 
    </body> 
 
    </div> 
 
    <!--container--> 
 
</div>

來源

2014-10-31 14:47:30 acupajoe

難道是我把它綁定到錯誤的div嗎？ – Dimoff 2014-10-31 15:06:49

對不起，我編輯了我的代碼。但是，你是試圖綁定導航類，然後調用導航ID？ – acupajoe 2014-10-31 15:19:48

將它綁定到導航包裝器是唯一有效的工具。然而，你的功能很好。謝謝。 – Dimoff 2014-10-31 15:48:10

的想法看起來不錯。我在過去使用的是

$(document).scroll(function(){ 
    var scroll = $(document).scrollTop(); 
    if(scroll > 100) { 
    $('#nav').addClass('fix'); 
    } else { 
    $('#nav').removeClass('fix'); 
    } 
});

也許環路是不是最有效的，但它的作品。

來源

2014-10-31 14:25:13 Felix

您可以編輯您的文章到告訴我整個事情應該是什麼樣子？ $（＃nav）.css（'position'，'fixed'）是正確的語法嗎？ – Dimoff 2014-10-31 14:27:24

在您提交您的評論之前完成編輯:) – Felix 2014-10-31 14:32:02

由於某種原因，這不起作用，我可能會再試一次。 – Dimoff 2014-10-31 14:35:31

將導航欄修復到頂部，一旦它被滾動到

回答

相關問題