Получение Affix для работы на nav и navbar

У меня есть html для макета страницы для сайта для библиотеки программного обеспечения, созданной моей исследовательской группой. Это делается с помощью бутстрапа 3. То, что я хотел бы получить, - это навигационная панель, которая находится чуть ниже jumbotron, чтобы зафиксироваться в верхней части страницы после ее прокрутки вверх. Мне также понравилось бы подобное поведение элемента nag в левом столбце страницы - когда страница прокручивается и они достигают вершины - что они затем фиксируются и остаются там. Из чтения я понимаю, что Affix в twitter bootstrap - это способ сделать это, но я не совсем уверен, что смогу понять, как это сделать правильно.Получение Affix для работы на nav и navbar

С помощью HTML ниже, что происходит, после прокрутки до сих пор навигационная панель, которая должна охватывать страницу, становится раздавленной - ссылки на навигационной панели перемещаются в одну строку под брендом navbar, а панель с номером больше. Как только я выясню, как использовать аффикс с навигатором, я надеюсь использовать его с элементом nav. Может ли кто-нибудь объяснить, что мне нужно сделать, чтобы получить эффект? Я довольно новичок в веб-дизайне.

Thanks, Ben.

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>SOFTWARE - GETTING STARTED WITH SOFTWARE</title> 
     <link rel="stylesheet" href="css/bootstrap.css" type="text/css"/> 
    </head> 
    <body> 
     <style> 
      .jumbotron { 
       margin-bottom: 0px; 
      } 
     </style> 
     <!-- Start of main container --> 
     <div class="container-fluid main"> 
      <div class="row-fluid"> 
       <div class="jumbotron"> 
        <h1> Getting Started </h1> 
        <p> Installing SOFTWARE on your machine is easy for most systems. 
         This guide will get you up and running. 
        </p> 
       </div> 
      </div> 
        <!--Here's thestart of the navabar I'm trying to affix --> 
      <div class="row-fluid" data-spy="affix" data-offset-top="200"> 
       <div class="navbar navbar-inverse"> 
        <div class="navbar-header"> 
         <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </a> 
         <a class="navbar-brand" href="#">SOFTWARE</a> 
        </div> 
        <div class="navbar-collapse collapse"> 
         <ul class="nav navbar-nav"> 
          <li><a href="#">Home</a></li> 
          <li><a href="#">About SOFTWARE</a></li> 
          <li class="active"><a href="#">Getting Started</a></li> 
          <li><a href="#">Quick Start</a></li> 
          <li><a href="#">Full Documentation</a></li> 
          <li><a href="#">Contact</a></li> 
          <li class="dropdown"> 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Download <b class="caret"></b></a> 
           <ul class="dropdown-menu"> 
            <li><a href="#">GitHub Repository</a></li> 
            <li><a href="#">Download TAR</a></li> 
            <li><a href="#">Download ZIP</a></li> 
           </ul> 
          </li> 
         </ul> 
        </div> 
       </div> 
      </div> 
      <!-- Begin Layout for Getting Started Page --> 
      <div class="row-fluid"> 
       <div class="col-lg-3"> 
        <ul class="nav nav-pills nav-stacked sidemenu"> 
         <li><a href="#">Introduction</a></li> 
         <li><a href="#">Installing R</a></li> 
         <li><a href="#">R Recommendations</a></li> 
         <li><a href="#">Installing HybRIDS from GitHub</a></li> 
         <li><a href="#">Installing HybRIDS from Source File</a></li> 
         <li><a href="#">Installing HybRIDS from Binary File</a></li> 
        </ul> 
       </div> 
       <div class="col-lg-9 whitep"> 
        <h1 class="whitep">Introduction</h1> 
        <p> 
         Installation text 
         Installation text 
         Installation text 
         Installation text 
         Installation text 
        </p> 
        <hr> 
        <h1>Installing R</h1> 
        <p> 
         R is simple to install for most operating systems. If you use a Mac or PC or Linux system, the process for installing it is like for installing any other software on that system. 
        </p> 
        <p> 
        TEST text to fill page to test scrolling behaviour... 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p> 
        <p> 
        TEST 
        </p>  
       </div> 
      </div> 
     </div> <!--End of main Container--> 
     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
     <script src="js/bootstrap.js"></script> 
    </body> 
</html>

источник

2013-08-26 Ward9250

Как указано в документации Bootstrap, вы должны определить классы CSS для нав и навигационной панели для когда affix пинки в ...

«Вы должны предоставить стили для этих классов (независимо от этого плагина). Класс аффикса-top должен быть в регулярном потоке документа . "

Таким образом, вы должны будете иметь некоторые CSS как для верхней навигационной панели и боковой нав ..

#nav.affix { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index:10; 
} 

#sidebar.affix { 
    position: fixed; 
    top: 80px; 
}

Вот демо Bootply с помощью affix как с верхней и боковой нав: http://bootply.com/69848

источник

2013-08-26 20:23:00 ZimSystem

Спасибо, Скелли, теперь он работает! – Ward9250

Когда ссылка на навигационную панель указывает на внутренние привязки (scrollspy), прикрепленный верхний навигатор перекрывает содержимое в этом примере. См. Http://stackoverflow.com/questions/18799688/bootstrap-affix-navbar-for-single-page-with-scrollspy-and-page-anchors/18834770 –

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

Получение Affix для работы на nav и navbar

ответ

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