Bootstrap navbar fixed on scroll

Я некоторое время боролся с этой проблемой, поэтому мне показалось, что я пришел в stackoverflow для получения помощи. Мой код: http://pastebin.com/H4PHdguq Bootstrap navbar fixed on scroll

Баскиально, что я хочу сделать, так это то, что при прокрутке вниз навигационная панель придерживается верхней части страницы. (Становится фиксированным) Я не смог выполнить это с помощью таких методов, как affix, возможно потому, что я делал это неправильно (?)

Любая помощь или ввод приветствуются!

Примечание: Я вырезал стиль CSS, потому что он не подходит к вопросу. Также извините своего рода грязный код :).

Код

<header class="masthead"> 
    <div class="container" style="text-align:center;"> 
    <h2 class="enjoy-css" style="padding-top:10px !important;">PIXELDESIGN</h2> 
    <p style="color:white; font-family:Source Sans Pro; text-shadow: 2px 1px #222; font-size:18px">TEST</p>

<!-- Begin Navbar --> 
<div id="nav"> 
    <div class="navbar navbar-default navbar-static"> 
<div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="/index.html">TEST</a></li> 
      <li><a href="/portfolio.html">TEST</a></li> 
       <ul class="nav navbar-nav navbar-right"> 
       <li class="grow" style="background-color: #39D6A3 !important; box-shadow: inset 0px -3px 0px #32BF91;"><a href="/contact.php"> CONTACT ME </a></li> 


      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </div><!-- /.navbar --> 
    </nav> 
</div> 

<style> 
body { 
    min-height:2000px; 
} 
</style>`

источник

2016-04-06 Cmnd

Пожалуйста, включите все соответствующий код в свой пост и ** не ** просто включить ссылку на jsFiddle/Pastebin. Ваш пост должен стоять отдельно от любого другого ресурса; – Raju

попытка Navbar фиксированной вершины, а не NavBar статическую.

источник

2016-04-06 02:06:47 sdfacre

Смотрите, я хочу, чтобы заголовок «исчезнул» при прокрутке. Оставляя только навигационную панель, я не считаю ее такой простой. – Cmnd

, о котором вы говорите? можете ли вы создать плункер или jsfiddle? – sdfacre

Добавлен в код. – Cmnd

Ну, используя navbar-fixed top вместо navbar-static, вы решите свою проблему. Я создал jsfiddle, чтобы показать это и его простое.

<div id="nav"> 
    <div class="navbar navbar-default navbar-fixed-top"> 
<div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="/index.html">TEST</a></li> 
      <li><a href="/portfolio.html">TEST</a></li> 
       <ul class="nav navbar-nav navbar-right"> 
       <li class="grow" style="background-color: #39D6A3 !important; box-shadow: inset 0px -3px 0px #32BF91;"><a href="/contact.php"> CONTACT ME </a></li> 


      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </div><!-- /.navbar --> 
    </nav> 
</div>

Jsfiddle: https://jsfiddle.net/mayank_shubham/jzdhvfmv/

источник

2016-04-06 04:35:24

Bootstrap navbar fixed on scroll

ответ

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