Как сделать навигационную панель прокруткой со страницей?

Question

Как сделать навигационную панель прокруткой вниз вместе со страницей? Я нашел здесь несколько ответов, но мне тяжело, потому что код для моей навигационной панели находится в другом файле, и я просто использовал <?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; 
} 

JS

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

Вот как моя страница выглядит

Answer 1

Может быть y ou ищут это. Просмотр в полноэкранном режиме

Вы должны добавить $('.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>

Answer 2

Поскольку вы используете Bootstrap, пожалуйста, добавьте следующий класс в <nav> элемент:

navbar-fixed-top 

Например:

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

Answer 3

Вы пробовали добавлять position:fixed в CSS для .navbar.navbar-inverse?