Wszystkie poprzednie rozwiązania kodują 40 pikseli na stałe w HTML lub CSS w taki czy inny sposób. Co się stanie, jeśli pasek nawigacyjny zawiera inny rozmiar czcionki lub obraz? Co zrobić, jeśli mam dobry powód, aby nie zadzierać z wyściółką ciała ? Szukałem rozwiązania tego problemu i oto, co wymyśliłem:
$(document).ready(function(){
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
$(window).resize(function(){
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
});
Możesz go przesuwać w górę lub w dół, dostosowując „1”. Wydaje mi się, że działa dla mnie niezależnie od rozmiaru zawartości paska nawigacyjnego, przed i po zmianie rozmiaru.
Jestem ciekaw, co myślą o tym inni: podziel się swoimi przemyśleniami. (Zostanie to zrefaktoryzowane, aby się nie powtarzało, btw.) Czy oprócz używania jQuery istnieją jeszcze inne powody, aby nie podejść do problemu w ten sposób? Mam go nawet z dodatkowym paskiem nawigacyjnym, takim jak ten:
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
+ $('.admin-nav').height() + 1 )+'px'});
PS: Powyżej znajduje się na Bootstrap 2.3.2 - czy będzie działał w wersji 3.x Dopóki ogólne nazwy klas pozostaną ... w rzeczywistości powinno działać niezależnie od bootstrap, prawda?
EDYCJA: Oto pełna funkcja jquery, która obsługuje dwa skumulowane, responsywne stałe paski nawigacyjne o dynamicznym rozmiarze. Wymaga 3 klas HTML (lub mógłby użyć identyfikatorów): user-top, admin-top i contentwrap:
$(document).ready(function(){
$('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
$('.contentwrap') .css({'padding-top': (
$('.user-top').height()
+ $('.admin-top').height()
+ 0 )+'px'
});
$(window).resize(function(){
$('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
$('.contentwrap') .css({'padding-top': (
$('.user-top').height()
+ $('.admin-top').height()
+ 0 )+'px'
});
});