Đô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ụ:
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
