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 |
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() > 800) {$(".header").addClass("change");
}else{$(".header").removeClass("change");
}}
</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
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() > 800) {$(".header").addClass("change");
}else{$(".header").removeClass("change");
}}
</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]
