Ví dụ điển hình là Facebook và các bạn có thể xem Demo ngay tại blog của mình, sau khi kéo bài viết xuống hết thành phần Liên Kết thì thành phần Xem Nhiều Trong Tuần sẽ được cố định bên sidebar
Giới thiệu
Tại sao mình lại nói như tiêu đề đó là thông minh? Bởi vì bạn có thể cố định bất cứ thành phần nào bạn muốn sau khi trượt thanh cuộn xuống hết thành phần nào đó, tất nhiên là nên để cuộn hết thành phần cuối cùng hoặc sát cuối cùng nếu bạn muốn cố định thành phần cuối cùng. Hơn nữa thành phần bạn muốn cố định sẽ tự động dừng khi chạm vào thanh footer của bạn và ko bị ẩn bởi thanh header trên cùng nếu bạn cố định nóHướng dẫn cách làm
Trước hết bạn phải xác định ID hoặc Class của các thành phần, mình lấy ví dụ luôn code mình đã áp dụng cho blog này
- #PopularPosts1
- #LinkList2
- #header-wrapper
- #copyright-wrapper
<script>//<![CDATA[
var mq = window.matchMedia('(min-width:1074px)');
if (mq.matches) {
function sticky_relocate() {
var a = $('#PopularPosts1').outerWidth(),
b = $('#LinkList2').outerHeight(),
d = $('#header-wrapper').outerHeight(),
e = $(window).scrollTop(),
f = $("#copyright-wrapper").offset().top,
g = $('#LinkList2').offset().top + b,
h = $("#PopularPosts1").height(),
i = 20;
if (e + h > f - i)
$('#PopularPosts1').css({
top: (e + h - f + i) * -1
})
else if (e > g) {
$('#PopularPosts1').css('position', 'fixed').css('top', d).css('width', '322px')
} else {
$('#PopularPosts1').css('position', '').css('top', '').css('width', '322px')
}
}
$(function() {
$(window).scroll(sticky_relocate)
sticky_relocate()
})
}
//]]></script>
- Trong đoạn code trên mình đã để màu sắc tương ứng với hình ảnh minh họa phía trên bạn nhớ thay thành các ID trên blog của mình.
- Ngoài ra còn các thông số 1074px nghĩa là nếu độ rộng màn hình dưới 1074px thì code sẽ không hoạt động nữa và 322px là chiều rộng của widget bạn muốn cố định
- Và các bạn có thể cố định bất kỳ widget nào nếu muốn chỉ việc xác định được đúng ID của nó
Cảm ơn đã theo dõi và đừng quên để lại comment góp ý! ./.