Chào các bạn, bài viết này chúng ta cùng tìm hiểu và thực hành cách làm sao để có một thanh bên mà khi cuộn để xem nội dung thì khi hết nội dung nó sẽ dừng lại. Đây tôi gọi là Sticky Sidebar, tôi sẽ sử dụng một Column để làm Sticky Sidebar. Tạo một thanh bên dính lại khi các nội dung khác vẫn đang được cuộn.
Thuộc Tính Sticky Là Gì
Trong thiết kế website Sticky là thuộc tính dính một đối tượng nào đó ở một vị trí định sẵn. Các bạn có thể thấy tại website này, tôi đã sử dụng cách này để tạo một thanh bên dính lại như các bạn thấy ở bên phải của website này.
Tạo Sticky Sidebar Trong Bricks Theme
Như đã nói ở phần trên, tôi đã thử sử dụng tính năng Sticky có sẵn của Bricks Theme nhưng nó thực sự chưa làm đúng ý của tôi, tôi cần nó nó dính ở hai phần trên và dưới của trang.
Kiểu như khi tôi cuộn xuống, thanh bên cũng sẽ được cuộn xuống cùng, khi nó được cuộn hết phần nội dung mà nó có thì nó sẽ được dừng lại ở đó. Khi người đọc cuộn lên thì thanh bên sẽ được cuộn lên cùng và đến đoạn nội dung đầu của thanh bên nó sẽ được dừng lại.
Tôi đã lướt nhiều website và thấy rằng về tính thẩm mỹ, hay về tính hữu ích nó rất tốt nên tôi đã tìm cách để thực hiện được điều này. Dưới đây là đoạn mã coce được chia sẻ trên cộng đồng Bricks theme, tôi đã tìm và áp dụng thành công nên lưu lại bài viết này để chia sẻ với bạn nào cũng đang cần để làm một thanh bên dính hai đầu như vậy.
Sticky Sidebar | Floating Column
Tạo Cột Dính Trong Bricks
Bạn cần sao chép đoạn mã dưới đây sau đó trong phần soạn thảo thiết kế của Brick bạn tạo một phần cử Code, bạn pase đoạn mã này vào thành nội dung của phần tử code.
Ở thanh bên mà bạn muốn nó dính lại bạn cần thêm một Class có tên là .fb-floating-aside__sticky
<script>
/*Source: https://github.com/Krzysztof-Antosik/Two-direction-Sticky-Sidebar*/
// Verificar el ancho de pantalla al cargar y redimensionar
function checkScreenWidth() {
if (window.innerWidth <= 767) {
// Si la pantalla es menor o igual a 676px, no ejecutar el código
return;
}const stickyElement = document.querySelector('.fb-floating-aside__sticky');
const startPosition = stickyElement.getBoundingClientRect().top;let endScroll = window.innerHeight - stickyElement.offsetHeight - 500;
let currPos = window.scrollY;
let screenHeight = window.innerHeight;
let stickyElementHeight = stickyElement.offsetHeight;
let topGap = 40;
let bottomGap = 40;setTimeout(() => {
if (stickyElement.hasAttribute('data-top-gap')) {
const dataTopGap = stickyElement.getAttribute('data-top-gap');
topGap = dataTopGap === 'auto' ? startPosition : parseInt(dataTopGap);
}if (stickyElement.hasAttribute('data-bottom-gap')) {
bottomGap = parseInt(stickyElement.getAttribute('data-bottom-gap'));
}
}, 100);stickyElement.style.position = 'sticky';
stickyElement.style.top = `${topGap}px`;
stickyElement.style.height = 'fit-content';function positionStickySidebar() {
endScroll = window.innerHeight - stickyElement.offsetHeight - bottomGap;
const stickyElementTop = parseInt(stickyElement.style.top.replace('px', ''));if (stickyElementHeight + topGap + bottomGap > screenHeight) {
if (window.scrollY < currPos) {
if (stickyElementTop < topGap) {
stickyElement.style.top = `${stickyElementTop + currPos - window.scrollY}px`;
} else if (stickyElementTop >= topGap && stickyElementTop !== topGap) {
stickyElement.style.top = `${topGap}px`;
}
} else {
if (stickyElementTop > endScroll) {
stickyElement.style.top = `${stickyElementTop + currPos - window.scrollY}px`;
} else if (stickyElementTop < endScroll && stickyElementTop !== endScroll) {
stickyElement.style.top = `${endScroll}px`;
}
}
} else {
stickyElement.style.top = `${topGap}px`;
}
currPos = window.scrollY;
}function stickyElementToMe() {
stickyElement.style.top = `${topGap}px`;
}function updateSticky() {
screenHeight = window.innerHeight;
stickyElementHeight = stickyElement.offsetHeight;
positionStickySidebar();
}setTimeout(() => {
window.addEventListener('resize', () => {
currPos = window.scrollY;
updateSticky();
});document.addEventListener('scroll', updateSticky, {
capture: true,
passive: true
});
}, 1000);
}// Verificar el ancho de pantalla al cargar y redimensionar
window.addEventListener('load', checkScreenWidth);
window.addEventListener('resize', checkScreenWidth);
</script>
