21 tháng 12, 2012

Ghim sidebar cố định khi cuộn bài viết dài

Đ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/

Đăng bởi: blue Vào lúc: 15:24 Danh mục:

0 nhận xét:

Đăng nhận xét

Bình Luận Mới

Weblog forum mới nhất

Máy tính mới nhất

Cơ khí mới nhất

Nhãn