Dokumentacja bootstrap na ten temat jest dla mnie trochę zagmatwana. Chcę osiągnąć podobne zachowanie jak w dokumentach z afiksowym paskiem nawigacyjnym: pasek nawigacyjny znajduje się poniżej nagłówka akapitu / strony, a po przewinięciu w dół powinien najpierw przewijać, aż osiągnie górę strony, a następnie trzymać się tam, aby umożliwić dalsze przewijanie .
Ponieważ jsFiddle nie działa z koncepcją navbar, utworzyłem oddzielną stronę do użytku jako minimalny przykład: http://i08fs1.ira.uka.de/~s_drr/navbar.html
Używam tego jako mojego paska nawigacyjnego:
<div class="navbar affix-top" data-spy="affix" data-offset-top="50">
<div class="navbar-inner">
<div class="container">
<div class="span12">
<a class="brand" href="#">My Brand</a>
This is my navbar.
</div>
</div> <!-- container -->
</div> <!-- navbar-inner -->
</div> <!-- navbar -->
Myślę, że chciałbym data-offset-top
mieć wartość 0 (ponieważ słupek powinien "trzymać się" na samej górze ", ale przy 50 jest przynajmniej jakiś efekt do obejrzenia.
Jeśli również umieść kod javascript w miejscu:
<script>
$(document).ready (function (){
$(".navbar").affix ();
});
</script>
Każda pomoc doceniona.
źródło
.navbar-fixed-top
zamiast affix ()?.navbar-fixed-top
umieściłby pasek nawigacyjny na górze przez cały czas . Chcę, aby nagłówek strony POWYŻEJ paska nawigacyjnego, a podczas przewijania w dół (a tym samym pasek nawigacyjny byłby przewijany) powinien trzymać się góry - wtedy i tylko wtedy. Dokumenty Bootstrap wykorzystywały te same mechanizmy co subnav w swoich poprzednich dokumentach, niestety usunęli go w dokumentach 2.1.0.)};
powinno być});
Odpowiedzi:
Miałem podobny problem i wydaje mi się, że znalazłem lepsze rozwiązanie.
Nie zawracaj sobie głowy określaniem
data-offset-top
w swoim HTML. Zamiast tego określ go podczas dzwonienia.affix()
:Zaletą jest to, że możesz zmienić układ swojej witryny bez konieczności aktualizowania
data-offset-top
atrybutu. Ponieważ wykorzystuje to rzeczywistą obliczoną pozycję elementu, zapobiega również niespójnościom z przeglądarkami, które renderują element w nieco innym położeniu.Nadal będziesz musiał zacisnąć element do góry za pomocą CSS. Ponadto musiałem ustawić
width: 100%
element nav, ponieważ.nav
elementy zposition: fixed
jakiegoś powodu źle się zachowują:I ostatnia rzecz: kiedy przymocowany element zostaje unieruchomiony, jego element nie zajmuje już miejsca na stronie, co powoduje, że elementy pod nim „skaczą”. Aby zapobiec tej brzydocie, zawijam pasek nawigacyjny tak, aby
div
jego wysokość była równa paskowi nawigacyjnemu w czasie wykonywania:.
Oto obowiązkowy jsFiddle, aby zobaczyć go w akcji .
źródło
Właśnie zaimplementowałem to po raz pierwszy i oto co znalazłem.
data-offset-top
Wartość to ilość pikseli, które trzeba przewijać w celu umieszczania efektu nastąpić. W twoim przypadku, po50px
przewinięciu, klasa twojego przedmiotu zostanie zmieniona z.affix-top
na.affix
. Prawdopodobnie chciałbyś zająćdata-offset-top
się130px
swoim przypadkiem użycia.Gdy nastąpi zmiana klasy, musisz ustawić swój element w css, określając styl dla klasy
.affix
. Bootstrap 2.1 już definiuje.affix
jakoposition: fixed;
więc wszystko co musisz zrobić, to dodać własne wartości pozycji.Przykład:
źródło
.navbar
klasa jest zachowana - czy na pewno?Aby rozwiązać ten problem, zmodyfikowałem wtyczkę affix, aby emitowała zdarzenie jQuery, gdy obiekt jest przymocowany lub nie jest naprawiony.
Oto żądanie ściągnięcia: https://github.com/twitter/bootstrap/pull/4712
Oraz kod: https://github.com/corbinu/bootstrap/blob/master/js/bootstrap-affix.js
A następnie zrób to, aby dołączyć pasek nawigacyjny:
źródło
Musisz usunąć
.affix()
ze swojego skryptu.Bootstrap przez
data-attributes
większość czasu daje możliwość wykonywania zadań za pomocą lub bezpośrednio w JavaScript.źródło
Mam to z kodu źródłowego twitterbootstrap i działa całkiem nieźle:
HTML:
CSS:
JS:
źródło
Musisz tylko usunąć skrypt. Oto mój przykład:
źródło
Dzięki namuol i Dave Kiss za rozwiązanie. W moim przypadku miałem mały problem z wysokością i szerokością paska nawigacyjnego, gdy użyłem razem wtyczek afflix i collapse. Problem z szerokością można łatwo rozwiązać dziedzicząc ją po elemencie nadrzędnym (w moim przypadku kontenera). Mogłem również sprawić, że upadnie płynnie za pomocą odrobiny JavaScript (właściwie coffeescript). Sztuczka polega na tym, aby ustawić wysokość opakowania
auto
przed wystąpieniem przełączenia zwinięcia i naprawić ją ponownie po.Znacznik (haml):
CSS:
Coffeescript:
źródło
Moje rozwiązanie do dołączenia paska nawigacyjnego:
źródło
Podobnie jak w przypadku zaakceptowanej odpowiedzi, możesz również wykonać następujące czynności, aby zrobić wszystko za jednym razem:
Spowoduje to nie tylko wywołanie
affix
wtyczki, ale także zawinie przymocowany element do elementu div, który zachowa oryginalną wysokość paska nawigacyjnego.źródło