Содержимое тела, перекрывающее навигацию при прокрутке

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

У меня есть контент поверх навигатора, который должен исчезать при прокрутке, он работает нормально.
Хотя прокрутка navbar должна быть исправлена, это работает нормально.
Проблема во время прокрутки, содержимое корпуса скользит по навигационной панели. Он должен идти из-за навигационной панели.
У меня есть ползунок ниже изображение навигационной панели

Вот код HTML файла:

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;"> 
     <div class="row"> 
      <div class="col-sm-4" style="background-color:yellow; width:200px"> 
       <img class="img-responsive img-rounded pull-left" src="img/logo 1.png" alt="Chania" width="200" height="200"> 
      </div> 
      <div class="col-sm-4" style="background-color:pink;"> 
       <h3>Fixed (sticky) navbar on scroll</h3> 
       <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p> 
       <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p> 
      </div> 
      <div class="col-sm-4 text-right" style="background-color:yellow;width:200px;"> 
       <img class="img-responsive img-rounded pull-right" src="img/logo 2.png" alt="Chania" width="200" height="200"> 
      </div> 
     </div> 
    </div> 

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
         <span class="sr-only">Menu</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
       </div> 
      </div> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        menu name.. 
       </ul> 
       <form class="navbar-form navbar-right" role="search"> 
        <div class="form-group"> 
         <input type="text" class="form-control" placeholder="Search"> 
        </div> 
        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button> 
       </form> 
      </div> 
     </div> 
    </nav>

CSS код навигационной панели:

.affix { 
top: 0; 
width: 100%; } 

.affix + .container-fluid { 
padding-top: 70px; }

код CSS для Slider

html, body { 
height: 100%;} 

.carousel, .item { 
height: 70%; } 

.carousel-inner { 
height: 143%; } 

.fill { 
width: 100%; 
height: 100%; 
background-position: center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
background-size: cover; 
-o-background-size: cover; }

Я новичок в бутстрапе. Спасибо.

источник

2017-02-17 nirmal rathod

Можете ли вы создать скрипку https://jsfiddle.net/? – Afsar

Вот он: https://jsfiddle.net/DTcHh/29975/ –

Вы должны поместить это в скрипку, но с летучей мыши, я предположил бы, что ваш Navbar должен содержать position:absolute; и z-index:1;

источник

2017-02-17 18:20:32 Adrianopolis

Я пробовал абсолютный и относительный оба, в обоих случаях навигатор исчезает при прокрутке. –

Увидев этот запрос я сделал jsfiddle для вас просто проверить его .. Вы используете наклеить для крепление navbar.

так в CSS просто добавьте следующее:

.affix{ 
width:100%; 
top:0px; 
}

И проверьте с Z-индекс вашей навигационной панели сохранить высокое значение nabvar как Z-индекс: 9999;

JSfiddle link

Все кодирование хорошо выглядит не проблема с этим. Просто проверьте мою скрипку

источник

2017-03-11 07:28:14

Содержимое тела, перекрывающее навигацию при прокрутке

ответ

Смежные вопросы