Jak korzystać z listy css bootstrap z przylepcami, aby utworzyć lepkie menu w kolumnie?

Question

Próbuję utworzyć lepkie menu za pomocą menu CSS Bootstrap affix i list-group.

Udało mi się uzyskać większość z nich do pracy, z wyjątkiem sytuacji, gdy użytkownik przewija w dół.

Gdy użytkownik przewinie w dół, menu wydaje się zajmować całą stronę.

Próbowałem go ustawić poprzez dane atrybutów

użyciu coś jak ten

<div class="container"> 
    <div class="row"> 
     <div class="col-md-3" id="leftCol"> 

      <div data-spy="affix"> 

       <div class="list-group list-group-root well"> 
        <a class="list-group-item" href="#introduction">Introduction</a> 
        <a class="list-group-item" href="#features">Features</a> 
        <a class="list-group-item" href="#dependencies">Dependencies</a> 
       </div> 

      </div> 

     </div> 
     <div class="col-md-9" id="mainCol"> 

      Some long text for the body along with some tables. 

     </div> 
    </div> 
</div> 

ale atrybut dane nie sprawiają, że menu trzymać! po prostu trzymał go na wierzchu.

Więc próbowałem użyć JS aby otrzymać pracę jak ten

$(function(){ 

    $('#leftCol').affix({ 
     offset: { 
     top: 100, 
     bottom: function() { 
      return (this.bottom = $('.footer').outerHeight(true)) 
     } 
     } 
    }); 


}); 

stworzyłem jsFiddle pokazać aktualny zachowanie.

Jak mogę naprawić ten affix, więc gdy użytkownik przewinie w dół menu, zachowa ten sam kształt?

Answer 1

Przede wszystkim należy użyć atrybutów danych lub JS.

Zaktualizowałem twój jsFiddle. Stanowisko id = "leftCol" został zmieniony:

<div class="col-md-3" > 

     <div id="leftCol"> 

       ... 

     </div> 

    </div> 

i styl dodano:

#leftCol { 
    width: 220px; 
} 

Ponadto, należy dodać zapytań o media, aby usunąć z pola widzenia umieszcza mobilnej.

Answer 2

jako „nie do przyjęcia” obejście, ustawić maksymalną szerokość menu do 250px jak tak

.list-group.list-group-root { 
    padding: 0; 
    max-width: 250px; 
} 

nie jestem pewien, jak zmusić go do pracy bez dodawania max-with Maxa ze powinny być określone przez rodzica. W tym przypadku class="col-md-3"

AKTUALIZACJA

java na ratunek!

Dodałem następujący kod JS, aby rozwiązać ten problem raz na zawsze.

W zasadzie za każdym razem zmienić rozmiar menu affix.bs.affix zdarzenie jest opalane

$(document).on('affix.bs.affix', '#docs-menu', function() { 
    $(this).width($(this).width()); 
}); 

Z docs

affix.bs.affix pożary => To wydarzenie bezpośrednio przed elementem ma zostało umieszczone .

Answer 3

OK Wierzę, że mam większość kodu działa tak, jak chcesz. Główne zmiany zrobiłem było dodanie tego CSS:

#leftCol { 
    display: block; 
    height: auto; 
    padding: 0; 
    width: 100%; 
} 

.navbar-fixed-top-again { 
    position: static; 
    top: 60px; 
    z-index:1031; 
} 
.navbar-inner { 
    background: red; 
    padding: 5px; 
} 

.affix { 
    position: fixed !important; 
} 

i zmieniłem się niektóre struktury na HTML:

<div class="container body-content"> 
    <div>made up content to allow the navigation to scroll more before it becomes sticky. This height will need to be set in the data-offset-top which is in the leftCol DIV just below this content. The same will apply if you need to set it for a footer offset.</div> 

    <!-- new nav section --> 
    <div class="col-md-3 navbar-fixed-top-again" id="leftCol" data-spy="affix" data-offset-top="80"> 
     <div class="navbar-inner"> 
      <div class="list-group list-group-root well"> 
      *the rest of your code* 
      </div> 
     </div> 
    </div> 
</div> 

Głównym problemem teraz jest o lepkiej menu nawigacyjnego o zmiennej wysokości. Jeśli zauważysz, kiedy przewiniesz zawartość do czytania podskakuje i zostaje ukryta. Wygląda na to, że jest to possible to fix this using JavaScript (link to SO question).

Oto link to your updated Fiddle. Nadzieja, która pomaga.