This Pro tutorial provides the steps to set up a sticky section that fades in when scrolling down and fades away when scrolled to the top.
Since the section will be built in the Bricks editor, we have full control over what elements appear inside it, including at various breakpoints.
The sticky section can be either at the top edge of the browser or at the bottom.
At top:
At bottom:
This tutorial can be implemented in any Bricks Page/template for an on-scroll sticky div and is not WooCommerce specific. That said, in this example we shall show WooCommerce product-specific data like the featured image, title, price and add to cart buttons in the sticky-on-scroll section.
Step 1
We need a way for the user to know that the current product has been added to the cart after they click the add to cart button.
Go to Bricks → Settings → WooCommerce. Toggle on Enable Bricks WooCommerce “Notice” element and save settings.
We will then be able to add a Notice element at the bottom in our sticky section.
Step 2
Edit the single WooCommerce product template with Bricks.
If you don’t have one already, you could import this fully-built template and edit it with Bricks.
Make sure that a template condition is set like below:
Copy the JSON code (link below) of the sticky template from our dev site and paste it to bring in the entire Section.
If you do not wish to have a close icon in the sticky section, delete the Icon element.
If you do wish to have the close icon, make sure it has this Interaction set:
sticky-add-to-cart ID has been set for the section at STYLE → CSS.
To make the section stick to the bottom instead of to top, go to section’s STYLE → LAYOUT, delete the Top value of var(--wp-admin--admin-bar--height, 0px) and set Bottom value to 0.
Make any desired changes in the section and when done set its Opacity to 0. This is because we want it to be initially not visible. If you want to make any changes later, remove the 0 opacity temporarily so you can see what you are working on in the editor and set it back to 0 when done.
Step 3
Let’s add some JavaScript to handle the scroll event and control the fade effect.
Click on the Settings (the cog icon) at the top → PAGE SETTINGS → CUSTOM CODE.
In the Body (footer) scripts, paste:
<script>
document.addEventListener('DOMContentLoaded', function() {
const stickyElement = document.getElementById('sticky-add-to-cart');
let ticking = false;
function updateStickyElement(scrollPos) {
if (scrollPos > 300) {
stickyElement.style.opacity = '1';
} else {
stickyElement.style.opacity = '0';
}
}
window.addEventListener('scroll', function(e) {
let scrollPos = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(function() {
updateStickyElement(scrollPos);
ticking = false;
});
ticking = true;
}
});
});
</script>Code explained
1. We add an event listener for DOMContentLoaded to ensure the DOM is fully loaded before we start working with it.
2. We get a reference to the sticky element using getElementById.
3. We use a ticking variable to implement a simple throttling mechanism using requestAnimationFrame. This helps improve performance by limiting how often we update the DOM.
4. The updateStickyElement function checks if the scroll position is greater than 300px. If it is, we set the opacity to 1 (fully visible); otherwise, we set it to 0 (invisible).
5. We add a scroll event listener to the window. When a scroll event occurs, we get the current scroll position using window.scrollY.
6. We use requestAnimationFrame to schedule the update of the sticky element. This ensures smooth performance and prevents unnecessary updates.
This solution provides a smooth fade-in effect for the sticky element when scrolling down past 300px and a fade-out effect when scrolling back up. The transition is handled by CSS, making it efficient and smooth.
You can adjust the fade threshold (currently set to 300px) and the transition duration (currently set to 0.3s) to suit your specific needs.
If you decided to keep the close icon, on the front end when it is clicked the section closes and the section won’t re-appear when scrolling down. If you want the section to appear on scroll, add
stickyElement.style.display = 'flex';below
stickyElement.style.opacity = '1';and
stickyElement.style.display = 'none';below
stickyElement.style.opacity = '0';Click Save.
Step 4
Check any single product page on the front end.
Click on Add to cart button for testing and you will see that the page refreshes and the scroll position is top of the page where the section is not visible. The user has to scroll down to see the section having the View cart button and this is not a good user experience.
To fix this, we can use browser storage (specifically, sessionStorage) to remember the scroll position before the page reloads and then restore it after the reload.
Replace the earlier code with
<script>
document.addEventListener('DOMContentLoaded', function() {
const stickyElement = document.getElementById('sticky-add-to-cart');
let ticking = false;
function updateStickyElement(scrollPos) {
if (scrollPos > 300) {
stickyElement.style.opacity = '1';
} else {
stickyElement.style.opacity = '0';
}
}
function saveScrollPosition() {
sessionStorage.setItem('scrollPosition', window.scrollY);
}
function restoreScrollPosition() {
const savedScrollPosition = sessionStorage.getItem('scrollPosition');
if (savedScrollPosition !== null) {
window.scrollTo(0, parseInt(savedScrollPosition));
sessionStorage.removeItem('scrollPosition');
}
}
window.addEventListener('scroll', function(e) {
let scrollPos = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(function() {
updateStickyElement(scrollPos);
ticking = false;
});
ticking = true;
}
// Save scroll position
saveScrollPosition();
});
// Restore scroll position on page load
restoreScrollPosition();
// Add event listener to the Add to Cart button
const addToCartButton = document.querySelector('.single_add_to_cart_button');
if (addToCartButton) {
addToCartButton.addEventListener('click', saveScrollPosition);
}
});
</script>Code explained
a. We’ve added two new functions:
▪ saveScrollPosition(): Saves the current scroll position to sessionStorage.
▪ restoreScrollPosition(): Retrieves the saved scroll position from sessionStorage and scrolls to that position.
b. We’re calling saveScrollPosition() in the scroll event listener. This ensures that we’re always saving the latest scroll position.
c. We’re calling restoreScrollPosition() right after the DOMContentLoaded event. This will restore the scroll position when the page reloads.
d. We’ve added an event listener to the Add to Cart button that calls saveScrollPosition() when clicked. This ensures that we save the scroll position right before the page reloads.
This solution should solve the issue by maintaining the scroll position across page reloads. When a user clicks the Add to Cart button:
1. The current scroll position is saved to sessionStorage.
2. The page reloads.
3. After the DOM is loaded, the script restores the saved scroll position.
4. The sticky element’s visibility is updated based on this restored scroll position.
Credit
I used AI for generating the JavaScript.