将导航栏修复到顶部，一旦它被滚动到

我希望我的导航栏只在到达顶部后才固定到顶部，而不是默认（如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

将导航栏修复到顶部，一旦它被滚动到

回答

相关问题