[Request] Sticky navbar affixed to container on scroll

[rdhar]

This is a feature request for Bulma CSS framework.

Description

Following the introduction of the Fixed Navbar feature by #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?

Examples

• 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.
• 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.
• 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 consideration as well my huge appreciation for the work that has gone into this project so far. Hope you have a great day!

[jgthms]

You would need JS for that, which Bulma doesn’t provides.

[VizuaaLOG]

Hey @rdhar,

I maintain a Javascript extension to Bulma called BulmaJS. If you would like this as a feature please file a feature request within the issues on the.BulmaJS Repo

If course if you're instead using Vue or React there are Bulma extensions for those as well.

[rdhar]

@jgthms I was afraid that might be the case. However, I did look into this a bit more and, at the risk of repeating myself, I think this might be within the realms of possibility for a CSS-only implementation using the position: sticky property. Case in point, this CSS-Tricks article as well this CodePen demo. Surely this would make it eligible for the Bulma CSS framework?

@VizuaaLOG Thank you for your suggestion, much appreciated. As requested, I've created issue #49 on the BulmaJS repo to address this. Since you mentioned it, I'm quite interested in a React solution. How would I go about finding such extensions?

Thanks to both of you for your time.

[VizuaaLOG]

Thank you I'll add that to my task list. There are a bunch of other related projects within the readme. For example there is Re-Bulma and React-bulma

I'm not that familiar with react as I personally do not use it, but those two may be helpful if you're working on a react project.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[rdhar]

Although, Bulma CSS framework hasn't picked it up, it appears to be implemented by @VizuaaLOG's BulmaJS project. Thanks!

[jgthms]

We could create .is-sticky-top helper for the navbar.

[kevbarns]

Hello ! indeed, it would be great to have a helper to fix an element according to its parent and stay displayed during the scroll. (like a navbar inside the content, not at the top or bottom like the current navbar).

In any case, great framework !

Best,

[Daeer-Projects]

Hello,
Would this also work for headers in tables?

More specifically tables that are rendered in the table-container div. I have done some work to implement this in a table, but having a .is-sticky-top modifier on the table would make it more generic, as long as the element being rendered is in a container class.

Thanks!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.