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

Để 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é!
· In trang (Ctrl+P)
Chúc bạn có thêm kiến thức quý báu!

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

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy 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 trả lời.