Fixed Header on scroll

Hey @b0bmarla!

The sticky header is still not supported, This is already in my todo list, on an issue on Github

I will make sure to add this in the next update of the plugin.

~ Nik

Thanks, Nik! Looking forward to the plugin update! ??

I’m also looking forward to stickie header option.

I was thinking that on approach would be to create a header with class=”default” and another shrunk version with class=”stickie” that would be invoked on scroll down n pixels.

If you implemented this then it’s a short step to my other REALLY LIKE TO HAVE: different header designs for default, tablet, and mobile… (I’ll create a separate request for that)

Hey @hartsook, @b0bmarla,

I actually have Sticky headers working on the Github, you can check that out here – https://github.com/Nikschavan/bb-header-footer

I would like to have your review of the current plugin. I will release it as an update in a few days.

~ Nik

A couple comments on the stickie header implementation:

1) Thank you for working on this, I find stickie headers useful particularly on long single-page designs.

2) One problem with this version is the header scrolls off the top, then when you reach the bottom of the header on scrolling, it abruptly reappears as a stickie header. This is jarring. If you only wanted one header and just make that stickie, then the initial header should NOT scroll, it should always be stickie.

3) In addition, one often wants the stickie header to have less height than the initial header. So you really need to design two headers, the initial, and the stickie one. Most themes that have stickie headers use some kind of fade transition between the initial and the stickie header. see examples of how Impreza theme does this at https://merrill.com/ or https://privatetrusteeservices.com/ and how Avada theme does it at https://betteconsulting.com/bette-kiernan/

You can see the problem here: https://stevenstraussmusic.com/product/along-the-navajo-trail/

(By the way, I’ve made Large Device and Medium and Small Device versions of this header as you suggested using the Responsive settings on the rows)

• This reply was modified 7 years, 10 months ago by Pieter Hartsook.
• This reply was modified 7 years, 10 months ago by Pieter Hartsook.

Hey @hartsook,

Thank you for the feedback, I have released a new version of the plugin where I have implemented most of your suggestions.

I have created an issue for the feature request for having different template when the header sticks on GitHub – https://github.com/Nikschavan/bb-header-footer/issues/21. I will try to tackle this in the next update of the plugin.

~ Nik

Hi Nik,

First off, you’ve done incredible work with this plugin. I would like to echo Pieter’s comments. Sticky headers are a great addition but the “flash” transition is distracting and for me makes it unusable on production sites for clients. Would love to see options for:

1) Fixed: Just have the header fixed to the top of the screen without transition, with option to shrink upon scroll

2) Smooth fade transition: Possibly a fade option that’s less jarring. For me though, #1 is the priority in terms of usability

Thanks for considering these changes in your next update!

-Ryan