Tất cả các giải pháp trước đây mã cứng 40 pixel cụ thể vào html hoặc CSS theo cách này hay cách khác. Điều gì nếu thanh điều hướng chứa một kích thước phông chữ khác nhau hoặc một hình ảnh? Điều gì sẽ xảy ra nếu tôi có một lý do chính đáng để không gây rối với phần đệm cơ thể ngay từ đầu? Tôi đã tìm kiếm một giải pháp cho vấn đề này, và đây là những gì tôi nghĩ ra:
$(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'});
});
Bạn có thể di chuyển nó lên hoặc xuống bằng cách điều chỉnh '1'. Nó dường như hoạt động với tôi bất kể kích thước của nội dung trong thanh điều hướng, trước và sau khi thay đổi kích thước.
Tôi tò mò những gì người khác nghĩ về điều này: xin vui lòng chia sẻ suy nghĩ của bạn. (Nó sẽ được tái cấu trúc là không lặp lại, btw.) Ngoài việc sử dụng jQuery, có bất kỳ lý do nào khác để không tiếp cận vấn đề theo cách này không? Tôi thậm chí đã làm cho nó hoạt động với một thanh điều hướng thứ cấp như thế này:
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
+ $('.admin-nav').height() + 1 )+'px'});
PS: Trên đây là trên Bootstrap 2.3.2 - nó sẽ hoạt động trong 3.x Miễn là các tên lớp chung vẫn còn ... trên thực tế, nó sẽ hoạt động độc lập với bootstrap, phải không?
EDIT: Đây là một hàm jquery hoàn chỉnh xử lý hai thanh điều hướng cố định xếp chồng, đáp ứng có kích thước động. Nó yêu cầu 3 lớp html (hoặc có thể sử dụng id): user-top, admin-top và 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'
});
});