如何使导航栏滚动页面？

问题描述：

如何让我的导航栏与页面一起向下滚动？我在这里找到了一些答案，但是我很难让我的导航栏的代码在另一个文件中，我只是使用<?php include ("includes/navbar.php"); ?>将它合并到我的其他页面。这里是我的代码至今：什么我打算做的是，如果我滚动我向下翻页导航栏将在页面如何使导航栏滚动页面？

的顶部导航

<div class="navbar navbar-inverse"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <!-- Button for smallest screens --> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> 
      <!--<a class="navbar-brand" href="index.html"> 
      <img src="assets/images/logo.png" alt="Techro HTML5 template"></a>--> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav pull-right mainNav"> 
       <li class="c1 active"><a href="index.php">Home</a></li> 
       <li class="c1"><a href="profile.php">Profile</a></li> 
       <li class="c1"><a href="games.php">Games</a></li> 
       <li class="c1"><a href="#">Top Players</a></li>      
       <li class="c1"><a href="about.php">About</a></li>     
       <li class="c1 dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a data-toggle="modal" data-target='#change'>Change Password</a></li> 
         <li><a href="../logout.php">Logout</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 

    <!--MODAL--> 
     <?php include("includes/changepass.php");?> 
    <!--END MODAL--> 


</div>

CSS

.navbar-inverse .navbar-nav > li.c1 a{ 
color: #00A8FF; 
} 

.navbar-inverse .navbar-nav > li.c1 a:hover, .navbar-inverse .navbar-nav > li.c1.active a{ 
color:#fff; 
background: #00A8FF; 
}

<script type="text/javascript"> 
    $(document).ready(function() { 

     $(window).scroll(function() { 
      console.log($(window).scrollTop()) 
     if ($(window).scrollTop() > 280) { 
      $('.navbar').addClass('navbar-fixed'); 
     } 
     if ($(window).scrollTop() < 281) { 
      $('.navbar').removeClass('navbar-fixed'); 
     } 
     }); 
    }); 
</script>

这里是我的页面的外观

你有没有尝试将类[navbar-fixed-top]（http://getbootstrap.com/components/#navbar-fixed-top）添加到你的'nav' ul中？ –

我添加了一些东西，因为我忘了说有一个div。 – KaelJasper

如果我尝试将导航栏固定在顶部，它立即将其自身附加到顶部。这不是我想要做的。 – KaelJasper

答

可能是y你正在寻找这个。查看全屏

您应该添加$('.navbar').addClass('navbar-fixed-top');

$(document).ready(function() { 
 

 
    $(window).scroll(function() { 
 
    console.log($(window).scrollTop()) 
 
    if ($(window).scrollTop() > 280) { 
 
     $('.navbar').addClass('navbar-fixed-top'); 
 
    } 
 
    if ($(window).scrollTop() < 281) { 
 
     $('.navbar').removeClass('navbar-fixed-top'); 
 
    } 
 
    }); 
 
});

.navbar-inverse .navbar-nav > li.c1 a { 
 
    color: #00A8FF; 
 
} 
 
.navbar-inverse .navbar-nav > li.c1 a:hover, 
 
.navbar-inverse .navbar-nav > li.c1.active a { 
 
    color: #fff; 
 
    background: #00A8FF; 
 
} 
 
.dummy-div { 
 
    background: black; 
 
    height: 200px; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="dummy-div"> 
 

 
</div> 
 
<div class="navbar navbar-inverse"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <!-- Button for smallest screens --> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> 
 
     </button> 
 
     <!--<a class="navbar-brand" href="index.html"> 
 
      <img src="assets/images/logo.png" alt="Techro HTML5 template"></a>--> 
 
    </div> 
 
    <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav pull-right mainNav"> 
 
     <li class="c1 active"><a href="index.php">Home</a> 
 
     </li> 
 
     <li class="c1"><a href="profile.php">Profile</a> 
 
     </li> 
 
     <li class="c1"><a href="games.php">Games</a> 
 
     </li> 
 
     <li class="c1"><a href="#">Top Players</a> 
 
     </li> 
 
     <li class="c1"><a href="about.php">About</a> 
 
     </li> 
 
     <li class="c1 dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings <b class="caret"></b></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a data-toggle="modal" data-target='#change'>Change Password</a> 
 
      </li> 
 
      <li><a href="../logout.php">Logout</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!--/.nav-collapse --> 
 
    </div> 
 

 
    <!--MODAL--> 
 
    <?php include("includes/changepass.php");?> 
 
    <!--END MODAL--> 
 

 

 
</div> 
 
<div style="height: 2000px;"> 
 
</div> 
 
</div>

先生这工作，但我不明白为什么它不会工作，如果我不会使用bootstrap.min.css，bootstrap.min.js，jquery.min.js的链接版本 – KaelJasper

@KaelJasper你有css/js本地档案？如果它不工作，请检查控制台是否有任何错误。尝试后告诉我。由于这是一个引导程序导航，它需要我添加的所有上述插件。 jquery必须放在最顶层。 –

我的不好，它实际上工作。我的保管箱没有同步我所做的更新。 – KaelJasper

答

由于您使用的自举，请在下面的类添加到您的<nav>元素：

navbar-fixed-top

如：

<nav class="navbar navbar-default navbar-fixed-top">

答

您是否尝试过加入position:fixed到CSS的.navbar.navbar-inverse？

如何使导航栏滚动页面？

相关推荐