Tôi đang làm việc trên thanh bên cuộn (dính). Vấn đề là hầu hết các thanh bên dính đều không xem xét rằng thanh bên có thể cao hơn khung nhìn (ví dụ: nếu nhiều mục được thêm vào rổ (thanh bên)). Đó là những gì tôi đang cố gắng giải quyết. Đây là những yêu cầu:Thanh bên jQuery nâng cao
Nếu chiều cao của thanh bên là cao thì khung nhìn, cần cuộn qua các nội dung và đáy của div nên dính vào dưới cùng của khung nhìn khi di chuyển xa hơn xuống .
Nếu chiều cao của thanh bên cao hơn thì chế độ xem, các div bên dưới chỉ được hiển thị khi bạn ở cuối trang .
Khi người dùng cuộn trở lại, thanh bên cuộn trở lại đầu trang và đưa trở lại lên đầu chế độ xem.
Nếu chiều cao của thanh bên ít hơn thì chế độ xem, cần phải là dính từ trên cùng khi cuộn xuống.
Vì vậy, tất cả trong tất cả một số chức năng khá và không đơn giản (tôi nghĩ). Gần nhất tôi đã nhìn thấy những gì tôi đang cố gắng đạt được là ví dụ này: http://demo.techbrij.com/730/fix-sidebar-scrolling-jquery.php nhưng cách mã được viết không phù hợp với tôi.
Cho đến nay, đây là những gì tôi đã thực hiện: DEMO
Và mã jQuery tôi đã sử dụng:
jQuery(document).ready(function($) {
var $sidebar = $('.sidebar'),
$content = $('.content');
if ($sidebar.length > 0 && $content.length > 0) {
var $window = $(window),
offset = $sidebar.offset(),
timer;
$window.scroll(function() {
clearTimeout(timer);
timer = setTimeout(function() {
if ($content.height() > $sidebar.height()) {
var new_margin = $window.scrollTop() - offset.top;
if ($window.scrollTop() > offset.top && ($sidebar.height()+new_margin) <= $content.height()) {
// Following the scroll...
$sidebar.stop().animate({ marginTop: new_margin });
} else if (($sidebar.height()+new_margin) > $content.height()) {
// Reached the bottom...
$sidebar.stop().animate({ marginTop: $content.height()-$sidebar.height() });
} else if ($window.scrollTop() <= offset.top) {
// Initial position...
$sidebar.stop().animate({ marginTop: 0 });
}
}
}, 100);
});
}
});
Hmmm. Tôi đã không xem xét điều này cho thư viện phần tử đầu trang/phần tử dính của riêng tôi. Tôi đoán tôi có một vấn đề mới để giải quyết. :-) http://underpull.github.com/Balloon/ – Vinay