EverWeb Widgets - Sticky Stuff

Show/Hide

A fixed header is not a good idea for a responsive page since it takes up too much room in the viewport when the page is viewed on a mobile phone.
If the header needs to be in view because it contains an important item like the navigation action tab a better option is to make it show/hide. The header will disappear on scroll down and then reappear on scroll up or when the page bottom is reached.
The item below uses sticky positioning so that it scrolls to the top of the browser/device window and then sticks

Sticky Heading

Position Sticky

Giving an item a fixed position doesn't make it sticky. A fixed item is fixed in position and never moves. In CSS3 we use relative, absolute and fixed position items.
The CSS "position:sticky" was introduced almost a decade ago and allows items to scroll and then stick at the top or at a predetermined distance from the top.
Sticky position is actually a combination of relative and fixed. It scrolls like a relatively positioned item until it reaches its predefined position - then it sticks.
Before sticky positioning was introduced we had to resort to using Javascript to achieve the same result.
Z-index
Note that the sticky item needs to be assigned a z-index to ensure that it remains in view above the items inserted below it.

Sticky Sidebar

alt

Scrolling Sidebar - Sticky Headings

A sidebar can be really usefull for displaying links to other topics, items relating to the main topic, advertising or links to reviews/blog posts etc.
Sidebar Design
A grid layout will easily create a two column layout - one for the main article and the other for the <aside> element. The main article is responsive and creates the height of the item and the sidebar has a fixed width - in this case 300px.
The sidebar can have any amount of content which will fill the height of the grid element and any overflow will appear on scroll.
The headings have "position:sticky" and remain in view until the next one reaches the top.

Footer

Position sticky can also be used to stick an item at the bottom of the viewport but again it isn't much use on a responsive page where a footer should not be used since it takes up too much room when viewed on phones. In this case a show/hide footer would be OK but no footer at all is even better.
Check out EverWeb ThemeKit for the best way to create a responsive website using EverWeb …

ThemeKit

© EverWeb Widgets - 2022