Cách tạo nội dung roll theo màn hình (floating) với ScrollToFixed Plugin jQuery

by Unknown 11:31:00 AM 0 nhận xét

Đôi khi bạn muốn tạo những nội dung nổi bật hoặc quảng cáo roll theo màn hình khi kéo chuột, việc này có vẻ sẻ phức tạp khi bạn tự viết bằng javascript. Nhưng với plugin ScrollToFixed thì việc đó thật dễ dàng.

Mời các bạn xem qua một số ví dụ về cách sử dụng:

Mặc định

$(document).ready(function() {
  $('#mydiv').scrollToFixed();
});

Dùng với margin và limit

$(document).ready(function() {
  $('#cart').scrollToFixed({ marginTop: 10, limit: $($('h2')[5]).offset().top });
});

Header fixed và footer fixed với một thông số limit

$(document).ready(function() {
  $('.header').scrollToFixed();
  $('.footer').scrollToFixed( { bottom: 0, limit: $('.footer').offset().top } );
});

Dùng với nhiều option khác nhau hoặc tạo thêm sự kiện khi roll, ví dụ như đổi màu font chữ, background...

$(document).ready(function() {
    $('.header').scrollToFixed({
        preFixed: function() { $(this).find('h1').css('color', 'blue'); },
        postFixed: function() { $(this).find('h1').css('color', ''); }
    });

    $('.footer').scrollToFixed( {
        bottom: 0,
        limit: $('.footer').offset().top,
        preFixed: function() { $(this).find('h1').css('color', 'blue'); },
        postFixed: function() { $(this).find('h1').css('color', ''); }
    });

    $('#summary').scrollToFixed({
        marginTop: $('.header').outerHeight() + 10,
        limit: function() {
            var limit = $('.footer').offset().top - $('#summary').outerHeight(true) - 10;
            return limit;
        },
        zIndex: 999,
        preFixed: function() { $(this).find('.title').css('color', 'blue'); },
        preAbsolute: function() { $(this).find('.title').css('color', 'red'); },
        postFixed: function() { $(this).find('.title').css('color', ''); },
        postAbsolute: function() { $(this).find('.title').css('color', ''); }
    });
});

Bạn có thể xem demo trực tiếp một số ví dụ:

• http://jsfiddle.net/y3qV5/434/ - Roll theo với một limit.
• http://jsfiddle.net/k2R3G/81/ - Cố định header, làm cho nội dung nằm bên dưới nó.
• http://jsfiddle.net/ZczEt/167/ - Ví dụ khá đầy đủ: Cố định header, footer và các thành phần theo một sự kiện
• http://jsfiddle.net/y3qV5/435/ - di chuyển lên và dừng lại ở những khoảng thời gian khác nhau.
• http://jsfiddle.net/y3qV5/769/ - Nhiều thành phần khác nhau cố định theo điểm dừng
• http://jsfiddle.net/ZZYpG/68/ - Cố định và thay đổi ngày theo điểm cụ thể
• http://bigspotteddog.github.io/ScrollToFixed/ - Những ví dụ thông dụng nhất

Cài đặt và sử dụng:

Bạn download plugin tại đây

Hoặc cập nhật bản mới nhất tại đây

Chúc các bạn thành công