#1 - JS sticky
Click here to open the sticky header in the editor
Go to the Advanced tab of every widget, and scroll down to see the Sticky section.
This setting is what makes the JS sticky feature powerful. It has 3 options:
- Body
- Parent
- Custom
Body: Select this to make an element sticky to the top of the browser window when it's scrolled to the top of the browser window no matter where the element is.
Parent: This is pretty much the same as Position: Sticky, but here you've more options. Check the Position: Sticky section below for more info.
Custom: For example, on the category page, you have a banner in the left column, you like to set the banner only (not the entire left column) to be sticky relative to the right column, then use this option.
The Hide when the page is scrolling down is perfect for a sticky geader. Hide the sticky header when the page is scrolling down to save spacing because when people keep scrolling down, they tend to keep scrolling to see more info, when people scroll the page up, they probably want to scroll up to the menu, it's the perfectly to show them the sticky header. This behavior is more and more popular.
#2 - Position: Sticky
Click here to open the sticky production info section in the editor
Go to the Advanced tab of every widget, and find the position setting in the Layout section.
Set the position to Sticky, you can set different values for different pages.
Setting the Position to sticky won't make it sticky. A placement position has to be set to it, this can be any of the left, right, bottom, or top.
If the sticky still doesn't work, check containers wrapping the current element, if any of the parent containers using overflow with a value of Hidden.
NOTE a sticky element's movement is limited to the boundaries of its parent container.
Blabla
labalala
bababab
lalala
labulabu
lalabuu
blabla
bubu
lala
lalala
Blabla
labalala
bababab
lalala
labulabu
lalabuu
blabla
bubu
lala
lalala
#3 - Position: Fixed
This is pretty similar to Position:Sticky. Technically, it's not sticky, it's fixed, but the result is kind of similar. The difference is that it doesn't require the scrolling of a page.
