How to make an element sticky on scroll?

How To
1

I have a product filter section underneath my header on my shop page (the container with green outline in the screenshot). Is there a way to make this container behave like a “sticky on scroll” header? As in, when the user scrolls down this filter section slides up to disappear behind the fixed header, and when the user starts scrolling up again it slides back down.

Screenshot 2022-08-31 151158
Screenshot 2022-08-31 1511581622×491 78.6 KB

I noticed that when a header template has sticky on scroll enabled it has 2 classes and an attribute added to it. I tried using this script which adds those classes and attribute to the id of the filter container and pasted it into the page settings but it didn’t work:

function makeSticky(){

var headerFilter = document.getElementById(“brxe-okmfzo”);

headerFilter.classList.add(“sticky”, “on-scroll”);

headerFilter.setAttribute(“data-slide-up-after”, 60);

}

makeSticky();

2

For reference this is the kind of behavior I’m looking for : https://codepen.io/Javarome/pen/pPQMVP

3

Update: after a few days of messing with javascript and css I got it to work! For anyone wanting to achieve something similar I followed this video and made some modifications to my code.

I’m a total newbie at coding but this is what I came up with.
Script:

<script>
const body = document.body;
let lastScroll = 0;

window.addEventListener("scroll", () => {
	const currentScroll = window.pageYOffset;
	if (currentScroll <= 10) {
		body.classList.remove("my-scroll-up");
		return;
	}

	if (currentScroll > lastScroll && !body.classList.contains("my-scroll-down")) {
		body.classList.remove("my-scroll-up");
		body.classList.add("my-scroll-down");
	} else if (
		currentScroll < lastScroll &&
		body.classList.contains("my-scroll-down")
	) {
		body.classList.remove("my-scroll-down");
		body.classList.add("my-scroll-up");
	}
	lastScroll = currentScroll;
});
</script>

and the CSS:

.my-scroll-down .header-filter-container {
  transform: translate3d(0, -100%, 0);
  transition: transform 0.7s ease-in-out;
}

.my-scroll-up .header-filter-container {
  transition: transform 0.7s ease-in-out;
}

.my-scroll-down .header-filter-block a {
 opacity: 0; 
 transition: opacity 0.4s ease-in, color 0.3s ease-in-out;
}

.my-scroll-up .header-filter-block a {
 opacity: 1;
 transition: opacity 1.3s ease-in, color 0.3s ease-in-out;
}


.header-filter-block a:hover {
 color: #c1b391;
  transition: color 0.3s ease-in-out;
}

.header-filter-block a {
  transition: color 0.3s ease-in-out;
  padding: 0px 20px;
}

.header-filter-block {
 filter: drop-shadow(0 -10px 15px rgb(170, 170, 170));
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

Since Bricks has it’s own scrolling classes I decided to make separate my-scroll-up & my-scroll-down classes to avoid potential interference. The filter and its container had header-filter-block and header-filter-container classes added. The hover effects on the a links (li items) have some hover effects to change text color and I added some more code to fade them out/in with opacity changes as the box itself slides out/into the page.

2 Likes