Javascript Scroll to add class (Cuộn trang thêm class) cho blogspot

- [tintuc]Để mô tả cách hoạt động Javascript Scroll to add class hoạt động như sau. 

Khi bạn cuộn web đến một cao nhất định được tính bằng px. Khi đó javascript sẽ tự thêm thuộc tính class='tên class'

Do vậy bạn chỉ cần viết thêm css cho class này thì sẽ thực hiện được một chức năng nào đó.


Javascript Scroll to add class
Javascript Scroll to add class


Cách mình vận dụng Javascript Scroll to add Class

Mình thực hiện chức năng này tại trang https://www.tinhdauonline.com.vn

Đoạn code sử dụng như sau:
<script>
    window.onscroll = function() {if ($(this).scrollTop() &gt; 800) {$(&quot;.header&quot;).addClass(&quot;change&quot;);
}else{$(&quot;.header&quot;).removeClass(&quot;change&quot;);
}}
</script>

Cách hoạt động của javascript trên

Khi cuộn chuột tới độ cao 800px. Javascript sẽ thêm một thẻ class='change' cho thẻ class ấn định ban đầu là .header.

Như vậy:
Lúc đầu <div class="header">
Lúc cuộn trang tới 800px: <div class="header change">

Lúc này mình sẽ thêm CSS cho thẻ class mới

.change{padding: 0!important;box-shadow: 0 0 15px #999;overflow: hidden;width: 100%;background: #fff;height: 58px;top: 0;z-index: 99999;position: fixed}

Trong đó có thuộc tính position: fixed giúp cho nó trượt theo màn hình khi cuộn trang

Vận dụng Javascript Scroll to add class

Phần .header là phần đầu trang bao gồm Logo, Search, Giỏ hàng của mình.
Khi cuộn đến 800px trở lên nó sẽ thêm thẻ class .change. Lúc này class có chức năng làm cho các phần .header trượt theo màn hình với khoảng cách top:0

=> Do vậy bạn sẽ thấy phần .header của trang web mình xuất hiện và cuộn theo khi cuộn chuột từ 800px trở lên

Cách sử dụng:

Bước 1: Xác định class hoặc id cần thêm class khi cuộn trang

Ví dụ ta xác định được html như sau: <div class="header"> thì dùng .header

Bước 2: Xác định độ cao để thêm class

Ví dụ 800px trở lên, bạn chỉ dùng con số 800

Bước 3: Đặt tên class cần thêm

Ví dụ sẽ thêm class có tên là change . Bạn lưu ý là không có dấu chấm nhé

Bước 4: Viết CSS cho class vừa thêm

Bạn có thể sử dụng
.header .change {..............}.change {...............}


Kết quả ta thu về đoạn Javascript scroll to add class như sau:

<script>
    window.onscroll = function() {if ($(this).scrollTop() &gt; 800) {$(&quot;.header&quot;).addClass(&quot;change&quot;);
}else{$(&quot;.header&quot;).removeClass(&quot;change&quot;);
}}
</script>
<style>
.header .change {..............}
.change {...............}
</style>

Bạn chèn trên thẻ đóng /body hoặc /head nhé!
Nói là class thôi nhưng nó có thể thêm được cho các ID bạn nhé!

-----------
Cách bạn sử dụng tính năng Javascript Scroll to add class như thế nào hãy cho mình ý kiến bên dưới để mọi người tham khảo và cùng nhau thỏa luận nhé!
[/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