Javascrip thêm class và remove khi cuộn tới id nào đó (for blogspot)

- [tintuc]Giả sử bạn muốn Menu của bạn trượt dọc theo màn hình nhưng dừng cuộn tới ID/class nào đó thì ta dừng lại sẽ ứng dụng như sau.

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

Javascript Scroll to add class
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.com
Cụ 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]
Huỳnh Phụng Blogger

TLQT là Blog chia sẻ kiến thức về Marketing, Digital Marketing, Kinh nghiệm làm SEO, Tối ưu Website và nhiều thứ khác

Đăng nhận xét

➔ Gửi kèm hình ảnh trên bài viết để được hỗ trợ tốt nhất.
➔ Để bình luận kèm hình ảnh, bạn vào trang Upload Ảnh, kéo thả để Upload hình ảnh lên.
➔ Bạn dán URL link hình ảnh vào khung bình luận và ấn Xuất bản, ảnh sẽ được tự động tải lên.
➔ Không spam trong khung bình luận, hạn chế viết tắt.
➔ Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin

Mới hơn Cũ hơn

POST ADS1

POST ADS 2