Tạo tiện ích ẩn hiện khi cuộn trang
Làm cho tiện ích ẩn hiện và trượt theo blog/website khi cuộn trang.
Mô tả: Tiện ích sẽ xuất hiện và trượt theo blog/website khi cuộn trang đến một vị trí nhất định nào đó (ví dụ: khi cuộn trang đên khoảng 1500px, thì tiện ích sẽ xuất hiện và trượt theo blog/website... )
 |
| Demo |
Demo: Cuộn xuống cuối trang để xem trên weblog của Chúng tôi.
Sau đây là code để tạo hiệu ứng Sticky cho widget mà bạn muốn
B1. Tạo một Tiện ích, và điền bất kỳ nôi dung nào bạn muốn hiển thị, và lưu lại.
B2. Xác định ID của tiện ích vừa tạo. (trong ví dụ này, chúng tôi muốn tiện ích có ID là HTML5 ẩn hiện và trượt theo blog/website)
B3. Thêm đoạn code sao vào trước thẻ ]]></b:skin>
#HTML5{width:335px;position:fixed;top:50px;z-index:9;background-color:#FFF;box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);display:none;}
B4. Thêm đoạn code tiếp theo vào trước thẻ </body>
$(document).scroll(function(){var y=$(this).scrollTop();if(y>1750){$('#HTML5').fadeIn()}else{$('#HTML5').fadeOut()}});</script>
Lưu Template và thế là xong
Lưu ý: Chỉnh sửa giá trị top:50px (khoảng cách giữa tiện ích và lề trên của blog/website) thành giá trị khác cho phù hợp với blog/website của bạn.