[Support request] Generatepress Site Header Block Element – make sticky?

Hi there,

Problem 1: how to make it sticky?

.gb-container.gb-container-798bd2c6 {
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 99;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Problem 2: Am I able to change the design when it goes into sticky mode? Shrink it and perhaps get rid of the tagline?

Unfortunately not without a custom js or javascript solution.

Let me know if this helps 🙂

Hi,

Doing a quick google I couldn’t find a clear way to check when an element is “stuck” to trigger the restyle using either CSS or JS.

Can you explain a bit more what you mean by “stuck”? If you mean the initial state, you shouldn’t start the header block element with “position:sticky” property by default/on page load.

You should add in position:sticky; or position:fixed; once you scroll down.

Here’s an example:

<script>
const stickyNav = document.querySelector('.gb-container.gb-container-798bd2c6');
var lastScrollTop = 0;

document.addEventListener("scroll", function(){ // or window.addEventListener("scroll", function(){
 var st = window.pageYOffset || document.documentElement.scrollTop;
   if (st > lastScrollTop){ //not top of scroll
       if(!stickyNav.classList.contains('sticky-state')){ //if it is NOT in sticky state
           stickyNav.classList.add('sticky-state'); //add sticky state
       }
   } else if(st == lastScrollTop){ //top of scroll
       if(stickyNav.classList.contains('sticky-state')){ //if it is in sticky state
           stickyNav.classList.remove('sticky-state'); //remove sticky state
       }
   } else {
		console.log("scrolling up"); 
   }
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);
</script>
<style>
.sticky-state{
position:sticky;
}
</style>

What this does is, it adds a sticky-state class to the element indicated on const stickyNav when not on top most scroll and removes it when you’re on the top of the page.

The .sticky-state class has position:sticky; but you can change this to position:fixed; if you must.

Note: The code provided isn’t guaranteed to work out of the box. It’s just to give you a direction/idea to work on. 😀

Hi Elvin,
Thanks so much for that, much appreciated! Your response answers my question.

No problem. Let us know. 🙂