Tôi đã triển khai mã để tắt thanh ở đầu màn hình ngăn xếp chồng: How to show popup message like in stackoverflowLàm cách nào để hiển thị thanh "lần đầu tiên ở đây" như SO và trượt các DIV khác xuống?
Điều này hiển thị div trên đầu trang của div ở đầu trang. Làm thế nào tôi có thể hiển thị "thanh" div mới và đẩy những người khác xuống? Cũng giống như StackOverflow.
Edit: Phản ứng ngay lập tức mã của tôi dưới đây sẽ không sử dụng thẻ div#removeme và thay vào đó cung cấp một margin-bottom. Tuy nhiên nếu bạn đang đi với position:fixed điều này sẽ không hoạt động vì nó tự gắn nó vào cửa sổ chứ không phải tài liệu.
Đây là những gì tôi làm:
Trong tài liệu html của tôi:
<div id="removeme">
<br /><br />
</div>
<div id="header"> This is a floating pane! </div>
<div id="content"> Your content goes here... </div>
Các CSS cho cửa sổ nổi này là:
#header {
position: fixed;
top: 0px;
left: 0px;
text-align: center;
background-color: #FFE6BF;
height: 30px;
border: 1px solid #FFCFA6;
width: 100%;
}
Và sau đó sử dụng jquery trong <head> thẻ:
$(document).ready(function() {
$('#header').click(function() {
$('#header').slideUp('fast');
$('#removeme').remove();
});
});
Tôi có thêm <div> thẻ có id removeme để đẩy nội dung xuống khi cửa sổ nổi hiển thị và tôi xóa nó bất cứ khi nào ngăn nổi bị ẩn.
Không sử dụng "position: fixed" bất động sản trong css, hãy thử "tuyệt đối" từ: http://www.w3schools.com/css/pr_class_position.asp
vị trí cố định là liên quan đến "khung nhìn" (cửa sổ trình duyệt) của bạn.
Vị trí tuyệt đối liên quan đến tài liệu html của bạn.
Không biết cấu trúc đầy đủ của html của bạn, cách đơn giản nhất là đặt lề trên của phần thân thành chiều cao của div thư của bạn, đẩy nội dung trang xuống. Sau đó, bạn nên chuyển nó trở lại. Tôi đã thực hiện nó như là một cuộc gọi lại để xảy ra sau khi mờ dần, nhưng nếu điều đó xuất hiện quá nhảy bạn có thể làm cho nó xảy ra trước khi mờ dần.
$(document).ready(function() {
$("#message").fadeIn("slow",
function() {
$('body').css('margin-top', $(this).height());
}
);
$("#message a.close-notify").click(function() {
$("#message").fadeOut("slow",
function() {
$('body').css('margin-top', 0);
}
);
return false;
});
});
bạn sẽ đặt thuộc tính css vị trí của thanh thành "cố định" rồi tạo div "đệm" để đệm chiều cao của thanh trên cùng. Một div nữa theo div đệm này. Và bạn có nó, phần còn lại của trang của bạn sẽ cuộn, nhưng thanh của bạn sẽ dính ở phía trên. Nếu bạn muốn mọi thứ di chuyển lên xuống bằng thanh của mình, hãy sử dụng slideUp trên cả vị trí cố định của bạn và phần đệm đó. Cả hai sẽ biến mất và phần còn lại của trang sẽ cuộn lên. Ngược lại nếu bạn muốn hiển thị thanh trên cùng.
'tuyệt đối' sẽ không bù đắp phần còn lại của nội dung trang. 'relative' sẽ. – eyelidlessness
@Shripad, @ là một phím ở bên trái. – BalusC
Rất tiếc! Xin lỗi @BalusC. :) –