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

Unknown commented on lenh sweep blend trong creo 10: “Lệnh Sweep Blend Trong Creo 1.0 - Blue79Blog >>>>> Download Now>>>>>…”
Anonymous commented on huong dan cai window 7 bang usb: “Hướng Dẫn Cài Window 7 Bằng Usb - Blue79Blog >>>>> Download Now>>>>>…”
Anonymous commented on download emx 70 f000 danh cho creo: “ Emx 7.0 F000 Dành Cho Creo Parametric - Blue79Blog >>>>> Download…”
Anonymous commented on thu vien mo hinh 3d mien phi voi: “Thư Viện Mô Hình 3D Miễn Phí Với Grabcad.Com - Blue79Blog >>>>> Download…”
Anonymous commented on download swansoft cnc simulator sscnc: “Swansoft Cnc (Sscnc) Link Mediafire [Crack Full] - Blue79Blog >>>>> Download…”

Weblog forum mới nhất

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

Cơ khí mới nhất

Nhãn