Add a sticky header or footer to your page

In order to transform the top page block into a sticky header or the bottom block into a sticky footer that stays in place when you scroll down the page, you would just need to add in this code on your page.

1. Sticky header

Add the following JavaScript code in the Settings - JavaScript menu of your page, in the Footer section:

<script>
const header = window.__page_generator ? document.querySelector('.section') : document.querySelector('.page-block');
const headerHeight = header.clientHeight;
header.classList.add("sticky-header");
document.querySelector('body').style.marginTop = headerHeight + 'px';
</script>

Then add the following CSS styles in the Settings - HTML/CSS - Head:

<style>
.sticky-header{
position: fixed;
top: 0;
width: 100%;
z-index: 11000000;
transform: translateX(-50%);
left: 50%;
}
</style>

 

2. Sticky footer

Add the following JavaScript code in the Settings - JavaScript menu of your page, in the Footer section:

<script>
const header = window.__page_generator ? document.querySelector('.section:last-child') : document.querySelector('.page-block:last-child');
const headerHeight = header.clientHeight;
header.classList.add("sticky-footer");
document.querySelector('body').style.marginBottom = headerHeight + 'px';
</script>

Then add the following CSS styles in the Settings - HTML/CSS - Head:

<style>
.sticky-footer{
position: fixed;
bottom: 0;
width: 100%;
z-index: 11000000;
transform: translateX(-50%);
left: 50%;
}
</style>

Note: Do not add buttons that activate a pop-up in the blocks that will be a sticky header or footer.

In case you need help with a custom functionality or any code customization that is not provided through our Help Center articles we have an Implementation team that can help our Enterprise users. The Enterprise Solution includes Implementation services as well as additional features and services that can be seen here: https://instapage.com/enterprise-benefits