Thủ thuật dưới đây sẽ thêm class nhưng sẽ remove (xóa class) khi cuộn tới class nào đó tính từ đầu màn hình
 |
| Javascrip thêm class và remove khi cuộn tới id nào đó (for blogspot) |
Bước 1: Xác định ID của đối tượng muốn cuộn.
Giả sử mình chọn ID của thành menu trên website toilaquantri.comCụ thể: #main-menu
Bước 2: Xác định ID của ID muốn dừng cuộn
Ở đây mình muốn cuộn tới Footer là dừng
Cụ thể ta xác định được id là: #footer-wapper
Bước 3: Code Javascript trượt giữa 2 ID
Chèn code Javascript bên dưới vào trước thẻ /head hoặc trên /body
<script type='text/javascript'>
//<![CDATA[
// Sticky cart
$(function() {
var top = $('#main-menu').offset().top - parseFloat($('#main-menu').css('marginTop').replace(/auto/, 0));
var footTop = $('#footer-wrapper').offset().top - parseFloat($('#footer-wrapper').css('marginTop').replace(/auto/, 0));
var maxY = footTop - $('#main-menu').outerHeight();
$(window).scroll(function(evt) {
var y = $(this).scrollTop();
if (y > top) {
if (y < maxY) {
$('#main-menu').addClass('fixed').removeAttr('style');
} else {
$('#main-menu').removeClass('fixed').css({
position: 'absolute',
top: (maxY - top) + 'px'
});
}
} else {
$('#main-menu').removeClass('fixed');
}
});
});
//]]>
</script>
Đoạn code có tác dụng thêm thẻ class .fixed vào id #main-menu
Lưu ý:
- Có 6 id #main-menu
- Có 2 id #footer-wapper
Bước 4: Viết CSS cho đối tượng
#main-menu.fixed {
box-shadow: 0 0 5px #999;
position: fixed;
top: 0px;
z-index: 99;
}
Bước 5: thêm thư viên Jquery
Hầu hết những Javascript này cần phải sử dụng thư viện Jquery, hãy thêm vào nếu trong blog bạn của có. Còn có rồi có thể bỏ qua.
<script type='text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {
//output the script (load it from google api)
document.write("<scr" + "ipt type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js\"></scr" + "ipt>");}
//]]>
</script>
Chúc bạn thành công!
Nguồn: Toilaquantri.com
[/tintuc]
Nguồn: Toilaquantri.com
