Как заставить Bootstrap Navbar Fix To Top Push Down (слайд) Элементы под

Question

Как вы можете видеть на This Demo Bootstrap 3 Navbar Fixed to Top не ведет себя как обычные навигаторы на скользящих элементах, которые после навигации на маленьких экранах. Вместо этого он накладывает навигационную панель поверх элементов контента. Теперь, пожалуйста, сообщите мне, есть ли способ заставить fix navbar также действовать, как обычные навигаторы по нажатию контента вниз и вверх по скольжению?

Благодаря

Answer 1

Хорошо, так что вы можете получить вид это делать то, что вы хотите, но позволяют мне показать вам, почему делает это честно плохая идея, потому что в конце концов, это просто бессмысленно.

Следующий ответ будет использовать фрагмент ниже для повторения. Вам может потребоваться просмотреть его на весь экран, что означает, что вам также может понадобиться настроить ширину окна вашего браузера, чтобы отобразить свернутый навигатор.

$(function() { 
 
    $('button.navbar-toggle').click(function() { 
 
    var value = $('body').css('padding-top'); 
 
    if (value === '70px') { 
 
     $('body').css('padding-top', '+=235'); 
 
    } else { 
 
     $('body').css('padding-top', '70'); 
 
    } 
 
    }); 
 
});

body { 
 
    padding-top: 70px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 

 
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
 
    <div class="container"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Brand</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li><a href="#">Link</a> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
      <li><a href="#">Action</a> 
 
      </li> 
 
      <li><a href="#">Another action</a> 
 
      </li> 
 
      <li><a href="#">Something else here</a> 
 
      </li> 
 
      <li class="divider"></li> 
 
      <li><a href="#">Separated link</a> 
 
      </li> 
 
      <li class="divider"></li> 
 
      <li><a href="#">One more separated link</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 

 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Link</a> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
      <li><a href="#">Action</a> 
 
      </li> 
 
      <li><a href="#">Another action</a> 
 
      </li> 
 
      <li><a href="#">Something else here</a> 
 
      </li> 
 
      <li class="divider"></li> 
 
      <li><a href="#">Separated link</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav> 
 
<div class="container"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading">Panel heading without title</div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 

 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading">Panel heading without title</div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 

 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading">Panel heading without title</div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 

 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 
    
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 
    
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 
    
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 
    
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 
    
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 
    
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 
    
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 
    
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 
    
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 
    
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 
    
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 
    
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 
    
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 
    
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 
    
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     Panel content 
 
    </div> 
 
    </div> 
 

 
</div>

бит из JQuery на вершине, что вы можете использовать для регулировки «обивка-топ» значение вашего тела элемента.

Первоначально, за official Bootstrap documentation относительно фиксированных навигаторов, вы должны добавить padding-top из 70px в тег тела вашей страницы, чтобы навигационная панель не перекрывала содержимое страницы. Таким образом, чтобы содержимое страницы перемещалось вниз, когда вы находились в верхней части страницы, вам нужно настроить это дополнение для соответствия на основе вашего навигатора.

Но здесь все становится немного бессмысленным.

Когда вы на самом верху содержание страницы, он получает толкнул вниз и выглядит вроде нормально, подобно нормальному Bootstrap: навигационной панели

Однако, прокрутите вниз примерно на полпути так ваше содержимое вашего тела теперь находится под вашим навигатором и снова расширяет навигацию. Вы получаете этот небольшой небольшой прыжок с содержанием, которое действительно не делает ничего полезного для пользователя.

Фиксированный навигатор предназначен, когда вы хотите, чтобы ваш навигатор всегда был виден независимо от того, где вы находитесь, прокручивая страницу, что означает, что на мобильных сайтах она должна наводиться на содержимое вашей страницы при расширении. Учитывая это, если содержание тела вашей страницы сдвинуто вниз, когда вы открываете фиксированную навигационную панель Bootstrap в мобильном режиме, это действительно бессмысленно.

Я предоставил ответ в случае, если вам или кому-либо еще действительно нужно какое-то решение, возможно, из-за менеджера или клиента, который настаивает на наличии такого типа функций, но я просто хотел указать, насколько бессмысленно это действительно, так вы могли бы объяснить это им, возможно, на свой страх и риск. : P

Answer 2

Ключа к надавив контент на мобильных устройствах было добавить «NavBar статического-топ» для .navbar:

if(screen.width >= 768) { 
    $('.navbar').addClass('navbar-fixed-top'); 
    $('body').css("padding-top", 128); 
} else { 
    $('.navbar').removeClass('navbar-fixed-top navbar-fixed').addClass("navbar-static-top"); 
    $('body').css({"padding-top": 0, "margin-top": 144}); 
}