Nhatthienkt.net - Tạo thanh cuộn có hiện thị phần trăm tuyệt đẹp bạn đã thử chưa. Và đây là thủ thuật sưu tầm từ nhiều nguồn trên Internet, nếu thích bạn có thể áp dụng cho blog của mình đẹp hơn.
Đi thẳng vào vấn đề các bạn có thể xem demo
Đi thẳng vào vấn đề các bạn có thể xem demo
Tạo thanh cuộn hiện thị phần trăm
Bước 1: Tùy chỉnh HTML
- Vào Mẫu chọn Chỉnh sửa HTML- Tìm thẻ ]]></b:skin>
- Chèn đoạn CSS sau lên trên nó
#scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #2187e7;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: ” ”;
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #2187e7;
}
- Tiếp tìm đến thẻ </body> và chèn đoạn sau lên trên nó
<div id='scroll'/>
<script>
/*<![CDATA[*/
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
/*]]>*/
</script>
Bước 2: Lưu lại mẫu
Bước 3: Tùy chỉnh màu sắc thanh cuộn
Để nhanh và dể test, ta thực hiện
- Vào Mẫu chọn Tùy chỉnh
- Vào mục Nâng Cao
- Dán đoạn CSS sau
/* Webkit Scrollbar */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: #FFFFFF; -webkit-box-shadow: inset 1px 1px 2px #E0E0E0; border: 1px solid #D8D8D8; } ::-webkit-scrollbar-thumb { background: #1F3A93; -webkit-box-shadow: inset 1px 1px 2px rgba(155, 155, 155, 0.4); } ::-webkit-scrollbar-thumb:hover { background: #AAA; } ::-webkit-scrollbar-thumb:active { background: #888; -webkit-box-shadow: inset 3px 1px 2px rgba(0,0,0,0.3); }
Lưu ý:
- webkit-scrollbar { width: 5px; }: Ta chỉnh giá trị độ rộng của thanh cuộn như thành 10 hoặc 15
- webkit-scrollbar-thumb { background: #1F3A93; Thay giá trị #1F3A93 thành màu khác.
- Sau khi chỉnh xong thực hiện Áp dụng cho mẫu
Vậy là hoàn thành, chúc các bạn thành công!
3 Nhận xét
hay thế á
Trả lờiXóatử vi 12 cung hoàng đạo
đẹp thế này có lẽ cần tạo cho trang chữa bệnh sỏi thận, của mình thui
Trả lờiXóayêu xa khó lắm, yêu xa nhớ lắm
Trả lờiXóaManchester United
Vui lòng viết comment Tiếng Việt có dấu.
Emoji- Bạn có thể gửi mail trực tiếp qua địa chỉ: nhatthienkt.s@gmail.com
- Nhận xét không hỗ trợ cho người dùng ẩn danh
- Lưu ý những nhận xét với mục đích backlink không liên quan đến nội dung bài viết sẽ bị xóa bỏ
- Bạn muốn theo dõi cập nhật trả lời sớm nhất từ adm vui lòng tick vào ô "Thông báo cho tôi" rồi xuất bản nhận xét của mình.