Sticky Header/Section

We currently have a sticky feature in development to allow you to make a section on your page sticky (stick to the top of the page on scroll)

This is most useful when fixing your header or navigation bar to the top of your page on scroll.

As a workaround for now while we develop this feature, you can follow the steps below:

Step 1: Apply sticky class to section you want to fix

Find the section you want to stick to the top of your page, and find the advanced options and enter "sticky" in the advanced custom css name:

Step 2: Add this code to the body scripts section

 Go to Settings > Page Scripts > Body Scripts and paste this code

<script>
var $ = jQuery;
$(window).scroll(function(){
  var sticky = $('.sticky'),
  scroll = $(window).scrollTop();
  if (scroll >= 100){
    sticky.addClass('fixed');
    sticky.slideDown(1000);
  } else{
   sticky.removeClass('fixed');
   sticky.removeAttr("style");
  }
 });
</script>
<br>

Step 3: Add custom css to make section stick

In the Settings > Custom CSS, add this code:

.fixed {
  position: fixed;
  z-index: 100;	
  width: 100%;
  transition: 0.3s all;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.09);
}
<br>

Important Notes

  • This code is currently only suitable to apply to ONE section per page.  If you apply the sticky class to more than one section, you may experience layout problems or this function not working correctly
  • Note: we do also advise using this only for sections at present, and ensure your section has a background colour set otherwise it may show as transparent on scroll
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.