Poprawiono nawigację na pasku bocznym w fluid twitter bootstrap 2.0

Czy jest możliwe, aby nawigacja na pasku bocznym była zawsze stała na przewijaniu w układzie płynnym?

Author: Quentin Pradet, 2012-02-19
Source

7 answers

Uwaga: {[7] } istnieje bootstrap jQuery plugin, który robi to i wiele więcej, który został wprowadzony kilka wersji po napisaniu tej odpowiedzi (prawie dwa lata temu) o nazwie Affix. Ta odpowiedź ma zastosowanie tylko wtedy, gdy używasz Bootstrap 2.0.4 lub niższej.

Tak, po prostu utwórz nową stałą klasę na pasku bocznym i Dodaj klasę offset do div zawartości, aby nadrobić lewy margines, tak:

CSS 

.sidebar-nav-fixed {
    padding: 9px 0;
    position:fixed;
    left:20px;
    top:60px;
    width:250px;
}

.row-fluid > .span-fixed-sidebar {
    margin-left: 290px;
}

Demo: http://jsfiddle.net/U8HGz/1/show / Edytuj tutaj: http://jsfiddle.net/U8HGz/1/

Update

Naprawiono moje demo, aby obsługiwać responsywny arkusz bootstrap, teraz przepływa z responsywną funkcją bootstrap.

Uwaga: To demo płynie z górnym stałym paskiem nawigacyjnym, więc oba elementy stają się position:static po zmianie rozmiaru ekranu, umieściłem kolejne demo poniżej, które utrzymuje stały pasek boczny, aż ekran spadnie na telefon komórkowy widok.

CSS 

.sidebar-nav-fixed {
     position:fixed;
     top:60px;
     width:21.97%;
 }

 @media (max-width: 767px) {
     .sidebar-nav-fixed {
         width:auto;
     }
 }

 @media (max-width: 979px) {
     .sidebar-nav-fixed {
         position:static;
        width: auto;
     }
 }

HTML 

<div class="container-fluid">
<div class="row-fluid">
 <div class="span3">
   <div class="well sidebar-nav sidebar-nav-fixed">
    ...
   </div><!--/.well -->
 </div><!--/span-->
 <div class="span9">
    ...
 </div><!--/span-->
</div><!--/row-->

</div><!--/.fluid-container-->

Demo , edycja tutaj .

drobna uwaga: istnieje około 10px / 1% różnica w szerokości stałego paska bocznego, jego ze względu na fakt, że ponieważ nie dziedziczy szerokości z kontenera span3 div, ponieważ jest on stały, musiałem wymyślić szerokość. Jest wystarczająco blisko.

I tutaj jest inna metoda, jeśli chcesz, aby pasek boczny stał się stały, dopóki siatka nie spadnie na małe widok ekranowy / mobilny.

CSS 

.sidebar-nav-fixed {
    position:fixed;
    top:60px;
    width:21.97%;
}

@media (max-width: 767px) {
    .sidebar-nav-fixed {
        position:static;
        width:auto;
    }
}

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        top:70px;
    }
}

Demo , edycja tutaj .

 168
Author: Andres Ilich,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-15 15:22:15

Najnowszy Boostrap (2.1.0) ma nową funkcję js "Afix" specjalnie dla tego typu aplikacji, FYI.

 46
Author: Joyrex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-24 18:04:32

To zepsuje responsywny Webdesign. Lepiej owinąć stały pasek boczny w Zapytanie o media.

CSS 

@media (min-width: 768px) { 
  .sb-fixed{
    position: fixed;
  } 
}

HTML 

<div class="span3 sb-fixed">
   <div class="well sidebar-nav">
      <!-- Sidebar Contents -->
   </div>
</div>

Teraz pasek boczny jest naprawiony tylko wtedy, gdy widok jest większy niż 768px.

 27
Author: HaNdTriX,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-03-05 22:38:44

To nie jest możliwe bez javascript. Znajduję afixa.js zbyt skomplikowane, więc raczej używam:

Stickyfloat

 1
Author: Zuhaib Ali,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-28 10:40:06

Zacząłem od odpowiedzi Andres' a, a skończyło się na tym, że dostałem taki lepki pasek boczny:

HTML: 

<div class="span3 sidebar-width">
  <div class="well sidebar-nav-fixed">
    Sidebar
  </div>
</div>

<div class="span9 span-fixed-sidebar">
  Content
</div> <!-- /span -->

CSS: 

.sidebar-nav-fixed {
  position:fixed;
}

JS / jQuery: 

sidebarwidth = $(".sidebar-width").css('width');
$('.sidebar-nav-fixed').css('width', sidebarwidth);
contentmargin = parseInt(sidebarwidth) + 60;
$('.span-fixed-sidebar').css('marginLeft', contentmargin);

Zakładam, że potrzebuję również JS, aby zaktualizować zmienną 'sidebarwidth', gdy port widoku jest zmieniany.

 0
Author: mdashx,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-04-18 02:37:47

Bardzo łatwy do uzyskania fix nav lub wszystkiego znacznika, który chcesz. Wszystko, czego potrzebujesz, to napisać swój znacznik naprawy w ten sposób i umieścić go w sekcji ciała 

   <div style="position: fixed">
       test - try  scroll again. 
   </div>
 0
Author: verdier,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-28 08:33:18

Z bieżącą wersją Bootstrap (3.3.2) istnieje dobry sposób na uzyskanie stałego paska bocznego do nawigacji.

To rozwiązanie działa również dobrze z ponownie wprowadzoną klasą kontenerów-płynów, co oznacza, że łatwo jest mieć responsywny układ pełnoekranowy.

Normalnie trzeba by użyć stałych szerokości i marginesów lub nawigacja nakładałaby się na zawartość, ale za pomocą pustej kolumny zastępczej zawartość jest zawsze umieszczana po prawej stronie miejsce.

Poniższa konfiguracja zawija zawartość po zmianie rozmiaru okna na mniejszy niż 768px i zwalnia stałą nawigację.

Zobacz http://www.bootply.com/ePvnTy1VII na przykład roboczy.

CSS 

@media (min-width: 767px) { 
    #navigation{
        position: fixed;
    }
}

HTML 

<div class="container-fluid">
 <div class="row">
  <div id="navigation" class="col-lg-2 col-md-3 col-sm-3">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 1</a></li>
    </ul>
  </div>

  <div class="col-lg-2 col-md-3 col-sm-3 hidden-xs">
    <!-- Placeholder - keep empty -->
  </div> 

  <div id="main" class="col-lg-10 col-md-9 col-sm-9 fill">
     ...
     Huge Content
     ...
  </div> 
 </div>
</div>
 0
Author: Christian.D,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-30 14:55:54