Cố định widget bất kỳ bên sidebar một cách thông minh

Ở các website lớn bạn thường thấy khi kéo thanh trượt đến thành phần cuối cùng của sidebar thì sẽ có những thành phần trong đó thường được cố định cho đến hết nội dung bài viết để tránh mất cân đối cho website, hơn nữa sẽ luôn hiển thị được những gì chúng ta cần gây chú ý đến cho độc giả
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

Vậy ta sẽ xác định trong ảnh có những ID sau:

• #PopularPosts1
• #LinkList2
• #header-wrapper
• #copyright-wrapper

 Và ta sẽ áp dụng code bên dưới trước thẻ đóng </body> để được kết quả như blog này

<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 ý! ./.