Đoạn script này sẽ giúp bạn làm được như tiêu đề bài viết. Chưa hiểu chức năng của đoạn Jquery này thì xem DEMO
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> //load thư viện Jquery
<script>
$(document).ready(function() {
        function isScrolledTo(elem) {
            var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen
            var docViewBottom = docViewTop + $(window).height();
            var elemTop = $(elem).offset().top; //num of pixels above the elem
            var elemBottom = elemTop + $(elem).height();
            return ((elemTop <= docViewTop));
        }
        var catcher = $('#thay thế'); //Tên thẻ Div kế trước thẻ Div muốn ghim
        var sticky = $('#thay thế'); //Tên thẻ Div muốn ghim
        $(window).scroll(function() {
            if(isScrolledTo(sticky)) {
                sticky.css('position','fixed');
                sticky.css('top','0px');
            } //Câu điều kiện, nếu đang ở biến sticky thì thành phần thẻ Div được gán vào biến sticky sẽ có CSS như bên dưới if
            var stopHeight = catcher.offset().top + catcher.height();
            if ( stopHeight > sticky.offset().top) {
                sticky.css('position','absolute');
                sticky.css('top',stopHeight);
            } //Tương tự, nếu ngược lại nếu không đang ở biến sticky thì thành phần thẻ Div được gán vào biến sticky sẽ có CSS như bên dưới if
        });
    });
</script>
Tùy chỉnh lại CSS để ghim thành phần Div theo vị trí mong muốn nhé. Rõ hơn xem nguồn bên dưới:
Nguồn: http://blog.hartleybrody.com/creating-sticky-sidebar-widgets-that-scrolls-with-you/

Facebook Google twitter
Từ khóa:
Cùng Chuyên Mục
Blogger Comments
Facebook Comments

Tin Tức Online
Xem Thêm Tất Cả »
Góc Chia Sẻ
Xem Thêm Tất Cả »
Game - Ứng Dụng Hay Tháng 8
Xem Thêm Tất Cả »
Góc Thư Giản
Xem Thêm Tất Cả »
Bài Viết Ngẫu Nhiên
Copyright © 2016 - All Rights Reserved
Template by Bùi Đạt - Powered by Blogger | SiteMap