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

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

<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

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

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

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

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

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>