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

by 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 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ụ:

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

Thảo luận

0 nhận xét:

Post a Comment