Tạo kết dính 1 vị trí khi kéo thanh cuộn trình duyệt

Nếu bạn muốn nhấn mạnh ở một vị trí nào đó của Blog? Bạn muốn khoanh vùng những nội dung cần được người dùng chú ý trên blog của mình?

Tạo Sticky hay còn hiểu là tạo kết dính 1 vị trí khi kéo thanh cuộn trình duyệt lúc mình xem Web hoặc Blog. Bài viết này tôi xin chia sẻ với các bạn một thủ thuật tạo Sticky cho nhiều Widget trong blogspot.

Demo các bạn xem bài (kéo thanh cuộn xuống để thấy nhé): Những câu nói hay về tình yêu

Các cách chúng ta thực hiện thủ thuật như sau

1. Xác định ID Widget của Blogger

- Vào bảng điều khiển -> bố cục -> Chỉnh sửa tiện ích mình cần tạo Sticky

Ví dụ ở trên mình xác định được đó là tiện ích HTML4

2. Code Sticky

- Vào mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)

- Tìm tới </body> và dán code dưới đây ngay trên nó


<script>
// Sticky widget by itviet360.com
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky("HTML4");
function bs_makeSticky(elem) {
var bs_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
var width = bs_sticky.offsetWidth;
var iniClass = bs_sticky.className + ' bs_sticky';
window.addEventListener('scroll', bs_sticking, false);
function bs_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
bs_sticky.className = iniClass + ' bs_sticking';
bs_sticky.style.width = width + "px";
} else {
bs_sticky.className = iniClass;
}
}
}
//]]>
</script>

<style>
.bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style> 
Trong đó thuột tính:
Thuộc tính Style CSS .bs_sticking  các bạn có thể thay đổi theo tùy ý mình nha
Chúc các bạn thành công, thân chào