0 bình luận · lượt xem

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



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 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

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ể: #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
Lưu ý:
  • Có 6 id #main-menu
  • Có 2 id #footer-wapper
<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

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!



Không có nhận xét nào:

NỘI QUY:
  • Mọi bình luận sai điều khoản sử dụng sẽ bị xóa mà không cần báo trước.
  • Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi Admin phản hồi.
  • Khi xuất bản bài viết chắc chắn không tránh khỏi lỗi về chính tả, cú pháp.

Hãy cùng tham gia bình luận về bài viết này nhé!