Всі попередні рішення жорстким кодом 40 пікселів, зокрема, в html або CSS тим чи іншим способом. Що робити, якщо на панелі вказівника міститься інший розмір шрифту або зображення? Що робити, якщо у мене є вагомі причини не возитися в першу чергу з накладками на тіло ? Я шукав рішення цієї проблеми, і ось що я придумав:
$(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'});
});
Ви можете переміщати її вгору або вниз, регулюючи значення "1". Здається, він працює для мене незалежно від розміру вмісту в навігаційній панелі до і після зміни розміру.
Мені цікаво, що про це думають інші: будь ласка, поділіться своїми думками. (Буде відновлено, що не повториться, btw.) Окрім використання jQuery, чи є інші причини, щоб не підходити до проблеми таким чином? У мене навіть це працює з вторинним навбаром, як це:
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
+ $('.admin-nav').height() + 1 )+'px'});
PS: Нагорі на Bootstrap 2.3.2 - чи буде він працювати в 3.x Доти, поки залишаться загальні назви класів ... насправді, він повинен працювати незалежно від завантажувальної програми, правда?
EDIT: Ось повна функція jquery, яка обробляє два складених, чуйних фіксованих навбарних панелей динамічного розміру. Для цього потрібні 3 html-класи (або вони можуть використовувати ідентифікатори): user-top, admin-top та 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'
});
});