Cách tạo Sticky Sidebar với jQuery

dotrinh Code Snippets

Có cài này trong web cũng hay hay nếu bạn thích thì làm theo mình hoặc lấy luôn mã nguồn về dùng luôn cũng được :)

Yêu cầu:

Bạn phải biết về css nhất là kiến thức về  thuộc tính position (có 2 giá trị absolute và fixed sẽ được áp dụng trong bài này)

Đầu tiên là thuật toán:

Cách tạo Sticky Sidebar với jQuery
Cách tạo Sticky Sidebar với jQuery

Ta sẽ lấy địa chỉ offset của thanh scroll window so sánh với địa chỉ offset của cái sidebar, nếu mà địa chỉ thanh scroll của windows lớn hơn thì ta sẽ thay đổi thuộc tính position cho cái sidebar, và nếu nhỏ hơn thì lại đưa về position ban đầu.

1. Tạo khung html

Ta có cái khung xương của trang:

<body>
<div class="wrp">
    <div class="header"></div>
    <div style="position: relative;height: 100%">
        <div class="left"></div>
        <div class="right">right</div>
    </div>
    <div style="clear: both"></div>
    <div class="footer">footer</div>
</div>
</body>

2. Style CSS

.wrp{
            margin: 0 auto;
            width: 1000px;
            height: 1500px;
            background: #e3e3e3
        }
        .header{
            width: 1000px;
            height: 100px;
            background: red
        }
        .right {
            width: 250px;
            height: 500px;
            background: #000;
            margin-left: 750px;
            position: absolute;
            top: 50px;
        }
        .left{
            float: left;
            width: 700px;
            height: 100%;
            border: 1px solid #e3e3e3;
        }
        .footer{
            width: 1000px;height: 420px;background: red
        }

3. Viết jQuery xử lý

 <script>
        $(document).ready(function () {
            var $this = $(".right");
            var offset_div = $this.offset().top;
            $(window).scroll(function () {
                var wd_top = $(window).scrollTop();
                if (offset_div < wd_top) {
                    if (wd_top > 900)
                    {
                        $this.css({"position": "absolute", "top": "900px"});
                    }else {
                        $this.css({"position": "fixed", "top": "0px"});
                    }
                } else {
                    $this.css({"position": "absolute", "top": "50px"});
                }
                console.log(offset_div);
                console.log(wd_top);
            });
        })
    </script>

rất đơn giản phải không ạ?

Hãy đóng góp ý kiến bằng cách để lại comment!

Enjoy!

DEMO

Các bài viết không xem thì tiếc:

Chia sẻ là sexy

dotrinh

Một lập trình viên dũng cảm, hòa đồng, luôn sống tích cực và anh ấy quay tay khỏe và khéo trong môn bi lắc :) Xem thêm thông tin tại trang -> Giới thiệu

Có 4 bình luận trong bài viết “Cách tạo Sticky Sidebar với jQuery”

  1. Tìm kiếm trên google và gặp bài viết của bạn |
    Bạn cho mình hỏi mình đang dùng blogger | bạn có thể hướng dẫn 1 bài cho blogger chi tiết | để mình và các bạn mới biết về blogg có thêm thủ thuật và kinh nghiệm ko ?
    cám ơn bạn

    Reply

Thảo luận

This site uses Akismet to reduce spam. Learn how your comment data is processed.