Hide header on scroll

Hide header bar on scroll and show it when scrolling up

This guide will help you to understand how to hide the header on scrolling the page. This feature allows you to hide the header when the user scrolls down the page. The header will reappear when the user scrolls up the page.

Steps to enable the feature

1. Add the headerAttributes to the page attributes
2. Add the hideHeaderOnScroll attribute to the headerAttributes and set it to true

Enable transparent header on scroll

This feature allows you to make the header background transparent when the user not scrolled the page. The header will hide when the user scrolls down the page and when scrolling up the page the header will reappear with default background color and background color will be transparent when scroll up to the top of the page.

Steps to enable the feature

1. Add the headerAttributes to the page attributes
2. Set hideHeaderOnScroll attribute to the headerAttributes to true
3. Add the transparentHeaderOnScroll attribute to the headerAttributes and set it to true

info

The transparentHeaderOnScroll attribute will work only when the hideHeaderOnScroll attribute is set to true.

Example page object:

const page = {
  title: "Page Tilte",
  attributes: {
    headerAttributes: {
      hideHeaderOnScroll: true,
      transparentHeaderOnScroll: true,
    },
  },
  blocks: [...blocks],
  stickyFooter: {
    blocks: [...footerBlocks],
  },
};
export default page;

Enable this feature for a in-app page from the dashboard

1. Go to the App Builder section in the dashboard
2. Go to the page you want to enable this feature
3. Open page settings panel by clicking on the settings icon on the top bar
4. Enable the Hide header on scroll option
5. Enable the Transparent header on scroll option if you want to make the header background transparent when the user not scrolled the page