Add Class to Sticky menu + Scroll up

[designerken]

Is it possible to add a class to the menu when the position is that the top of the screen?

Similar to how Headway works. When the menu reaches the top it gets the class “headroom–pinned headroom–top” this allows us to style differently when it reaches the top of the screen.

[whistlermedia]

The easiest way is most likely through Pro since you can create a Header element and then build it from there. Hiding certain menus based on parameters like scroll depth/device etc.

Header | Themeco Docs

[designerken]

Thanks for the input but, not what I want.

When using the “new” header option of “Scroll Up” new classes are added to the header, specifically “x-bar-is-visible”. However when the user reaches the top of the page that class is still present.

So if you have header with transparent background over a dark image image with white element, and when you scroll you want to change that background to black that is easy enough. But when you go back to the top of the page the background is still black, when it should reset to transparent. If the classes reset, then you can do it in CSS no problem. Hence me asking for Theme.co to add classes programmatically since they are trying to achieve the Headroom.js look and feel.

Can this be acheived by using hide/show and duplicating the menu and bars? of course it can, but what a waste of time and now I have to remember to update multiple menus if they change.

[tristup]

Hi @designerken,

If I am not wrong, you are trying to change the color when the Bar is sticky and revert it while it comes back to the actual position. If that is the case, you can try the solution given in the following thread.

Header nav bar to remain transparent while static, but be solid white while scrolling

Hi, I would like help with making my header nav bar transparent at first, but change to solid white while scrolling. Please see the secure note for more information.

Sticky bar first transparent

Hi there Is it possible to have the sticky bar first transparent and with the first scroll get a background color? Thanks Andreas

Pro Header Builder - Issues with Shrink on Sticky Bar!

Hi, I’m using the Pro header builder and I’ve tried to look for a guide or something in writing to help me with it, but all I could find is this link https://theme.co/docs/header-footer-overview and some video tutorials. The documentation doesn’t go into any detail, it’s very basic and the videos aren’t specific to what I want to know, so is there a page or link I haven’t come across which explains the header builder in more detail? I’m hoping you can help me with the following: I’ve set the …

Transparant header overlaying first section

That’s quite a pitty as you guys usually gave at least a great answer. I only read that all is outside of the scope of your theme, whereas I see multiple similar questions being answered in a proper way. Regretting a little going ahead with X theme.

Hope it helps.
Thanks

[designerken]

@tristup

That was just one use case. Adding the “is-pinned” & “is-top” class to the header when at the top would make things much easier and no need to duplicate the same bars/menus.

[tristup]

Hi @designerken,

That is what you can do without customization or adding any custom code. The customization is beyond the scope of Theme Support, I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One TOTAL CARE, where we offer small customizations.

Thanks

[designerken]

@tristup

We already implement Headroom.js in our builds, since your developers didn’t have an option built into the Pro Header Builder to show the menu when scrolling up.

Since the devs now have an option for “scroll up” now for Sticky headers on the current releases, your team may want to look into adding this small feature of the additional classes and take a lesson from headroom.js

Have a great day.

[JvP]

This would be nice to have natively, +1

[charlie]

I don’t know if this accomplishes what you are trying to do, but the bars use x-bar-fixed class when they are in their fixed state. On any element that is inside the bar you can do something similar to this. If you are actively trying to add classes to inner children I feel like it’d make more sense as a script. I can dispatch events for everybody around this though. Let me know if this what you are looking for.

.x-bar-fixed $el {
  width: 200px;
}

[designerken]

Hey @charlie

Thanks for chiming in. Yes you are correct x-bar-fixed does appear when you have sticky and scroll up both selected. This almost works to not have to duplicate the bar and have the same menu twice in the builder.

The issue is that when the user goes back to the top of the page x-bar-fixed is still present, and it should IMHO not be present, just like at page load. Optionally add the classes ‘x-bar-pinned’ or ‘x-bar-top’ (although the later is used already and present at all times) when at the top of the page.

Here is my sample at page load:
x-bar x-bar-top x-bar-h x-bar-absolute x-bar-is-sticky e979-e1 mr7-0 mr7-1

vs after scrolling up (and is persistent until page reload):
x-bar x-bar-top x-bar-h x-bar-absolute x-bar-is-sticky e979-e1 mr7-0 mr7-1 x-bar-fixed x-bar-is-visible

Here are a few that Headroom uses not that we have to use all these but would be nice.

"classes" : {
    // when element is initialised
    "initial" : "headroom",
    // when scrolling up
    "pinned" : "pinned",
    // when scrolling down
    "unpinned" : "unpinned",
    // when above offset
    "top" : "top",
    // when below offset
    "notTop" : "not-top",
    // when at bottom of scroll area
    "bottom" : "bottom",
    // when not at bottom of scroll area
    "notBottom" : "not-bottom",
    // when frozen method has been called
     "frozen" : "frozen",
    // multiple classes are also supported with a space-separated list
    // pinned: "headroom--pinned foo bar"
}

[charlie]

I gotcha. Yes the “Scroll Up” stickies should remove the fixed class if it is at the top of it’s waypoint regardless of which direction was last scrolled. I think it would be faster that way anyway, as it removes the class the second you scroll down. It doesn’t seem to handle resizing very elegantly too so I’ll take a look at both.

I’ll keep that list of events in mind. Thanks have a great day!

[designerken]

@charlie Thanks for the time and consideration of the classes. Looking forward to the see this implemented.

Take care.