search

bs-production / sure-dry-template

0 stars 0 forks source link

New auto hide sticky nav #23

Closed IamStephan closed 3 years ago

IamStephan commented 3 years ago

The new sticky nav now has the ability to show and hide the main navigation but always have the banner information available. There are essentially 3 states the bar can be in: hidden, partially shown (just the banner) and fully show(Both banner and super nav).

The three states on desktop:

Fully hidden

image

Partially shown

image

Fully shown

image

The three states on mobile:

Fully hidden

image

Partially shown

image

Fully shown

image

IamStephan commented 3 years ago

To avoid the jumps I'm checking the speed at which the user scrolls. If it's slow, the state of the nav won't change (This should avoid the navigation jumping on android devices).

The problem with this is that in some instances when the user needs to see the navigation bar while at the bottom would mean they would have to scroll fast. if there isn't enough space the state change won't trigger.

BUT, if there isn't enough space then the user will already be at the top where the navigation is anyway.

It's best to run it locally to see the autohide behavior