Hướng dẫn cách giữ cố định phần tử khi cuộn chuột với Sticky và Collapse cho Blogspot

Điểm 4.6/5 dựa vào 87 đánh giá

Sticky và Collapse là 2 hiệu ứng được sử dụng rất phổ biến và hiệu ứng rất hữu ích trong thiết kế website hay blog. Sticky sẽ giúp chúng ta giữ cố định 1 phần tử của website khi cuộn chuột, thường dụng cho phần Header hoặc 1 phần tử bất kỳ nào trong website. Collapse là hiệu ứng thu nhỏ thành phần và giữ cố định khi cuộn chuột, việc này sẽ giúp tiết kiệm không gian và kết hợp hiệu ứng đẹp mắt cho website của bạn.

Trước hết bạn cần xác định phần tử mà bạn muốn giữ cố định với Sticky hay Collapse, ví dụ ở đây mình sẽ giữ cố đình cho phần Header khi cuộn chuột. Ngoài ra bạn có thể thực hiện với bất kỳ thành phần nào bạn muốn giữ ở đầu trang khi cuộn chuột xuống nhé

<div class="header"><h1>Header</h1></div>

Bây giờ thì bạn sẽ chọn 1 trong 2 hiệu ứng Sticky hay Collapse để sử dụng.

1. Đối với Sticky thì bạn hãy copy đoạn code bên dưới và dán vào trước thẻ </body>. Xem DEMO

<style>.sticky {
position: fixed;
top: 0;
}
</style>
<script>
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;

function onScroll(e) {
window.scrollY >= origOffsetY ? header.classList.add('sticky') :
header.classList.remove('sticky');
}

document.addEventListener('scroll', onScroll);
</script>

2. Đối với Collapse thì bạn hãy copy đoạn code bên dưới và dán vào trước thẻ </body>. Xem DEMO

<style>.collapse {
height: 40px !important;
}
.collapse h1 {
height: 40px !important;
line-height: 40px !important;
font-size: 1em;
}
.header {
width: 100%;
height: 110px;
background: #F6D565;
position: fixed;
top: 0;
transition-duration: .5s;
}
.header h1 {
margin: 0;
height: 110px;
line-height: 110px;
transition-duration: .5s;
}
</style>
<script>
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;

function onScroll(e) {
window.scrollY >= 200 ? header.classList.add('collapse') :
header.classList.remove('collapse');
}

document.addEventListener('scroll', onScroll);
</script>

Nếu muốn áp dụng cho phần tử khác bạn thay đổi Class Header thành thành phần bạn muốn áp dụng cho Blogspot của bạn.

Chúc bạn thành công!

Theo mylop.edu.vn

Chuyên mục: Blogspot nâng cao Blogspot tips