Header/Footer : Z-Index and scroll behavior

How To
1

Hello everyone!

After 7 years on Elementor, here I am making the transition to Bricks, which I hope will be a game changer.

I’m running into two problems today, and some of you might be able to help.

  1. I’ve set the Z-index of my header section to 10 so that it’s above my content. On the other hand, on my home page, my first section has a Z-index of 100 so that it’s above the header (the header that’s uncovered once the user has scrolled past the first section). Unfortunately, the header remains on top despite a lower Z-index. Any idea where the problem might be coming from and how to solve it?

  2. The last #news-popup section of my footer contains a form for subscribing to the newsletter. This 150px-high section is sticky to the bottom, but is only displayed when the user scrolls to the top. Here’s the code I added to the Body (end) scripts box:

<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;

  if (prevScrollpos > currentScrollPos) {
    document.getElementById('news-popup').style.bottom = '0';
  } else {
    document.getElementById('news-popup').style.bottom = '-160px'; 
  }
	  prevScrollpos = currentScrollPos;
};

</script>
<style>
#news-popup {
	transition: all .4s ease!important;
}
</style>

Unfortunately it doesn’t work on Bricks and I don’t understand how to achieve this.

Thank you for taking the time to read this,