Request: Sticky navbar affixed to container on scroll

[rdhar]

Is your feature request related to a problem? Please describe.
Following the introduction of the Fixed Navbar feature by issue #326, would it be possible to include a sticky navbar which affixes to the top/bottom of its container upon reaching a certain scroll threshold? Optionally, it could be expanded upon to hide the navbar on scroll down and reveal upon scrolling up?

Describe the solution you'd like

• Tuts+ - Sticky Positioning with Nothing but CSS
  It's a few years out-of-date... which works to our benefit since the adoption of position: sticky has increased significantly (CanIUse) across a number of browsers since then.
• CSS-Tricks - position: sticky;
• CodePen - All CSS for sticky elements

Describe alternatives you've considered

• Mini.css - Landing Page
  Nav bar sticks to the top of the viewport on both desktop and mobile devices alike.
• Ant Design - Affix
  A more granular breakdown and demonstration of the sticky navbar behaviour.
• Headroom.js (optional)
  Admittedly, this is a script but the implementation of the "smart" sticky navbar is very smooth and would be ideal to target, if at all possible. More than happy for this to be offloaded to a separate issue/request if that makes feature management easier.

Thanks for your time and I really appreciate your suggestion to create this ticket from the original issue #2051. Hope you have a great day!

[VizuaaLOG]

Thank you for your suggestion and detailed issue. I'll look at getting this implemented in a future version.

[VizuaaLOG]

Feature added in master will be included in the next release.

[rdhar]

Thank you!

[stevefrench39]

Could you point me in the direction of a working implementation of this?

[VizuaaLOG]

Hey @networkchimp,

The BulmsJS's documentation navbar uses the sticky feature, without the auto-hiding etc. The docs can be found at https://bulmajs.tomerbe.co.uk/docs/0.10/2-core-components/navbar/