Cannot get this sticky nav and fixed hero section working

Hey all, I might be losing my mind… I cloned a site I liked and went to work on modifying it for my team’s own purposes. When I cloned the site, the two features that have stopped working were working great. A small number of changes later though, and they aren’t working at all. Would appreciate any insights anyone might have as to what’s going on.

Here’s the link to my site: Design Responsive Websites - Webflow
And the link to the sample site: Design Responsive Websites - Webflow

PROBLEM #1: THE FIXED HERO SECTION

1st, the fixed hero section. As you’ll see in the sample site, the top hero section with all the pictures is fixed in place, and the next section down scrolls over it. Sadly, something has changed in my code that is preventing the published site from showing this behavior. Oddly enough, when I’m in the webflow editor, it DOES behave with the correct “fixed” property.

PROBLEM #2: THE STICKY NAV BAR

As you’ll see in the sample site, when the nav bar (which is set below the Hero section) hits the top of the screen, it “sticks” in place. Then as the user scrolls back up, it unsticks to reveal the hero section again. This is implemented through a bit of jquery which is here. I’ve confirmed that the class is still named “navbar” and can’t fathom what the problem might be…

I’m sure i’m missing something obvious, but any help would save me a bundle of headaches.

Thanks!

Jason

By the way, I have been viewing how the site operates in the inspection panel and the script does appear to be working exactly as it should (changes the position from absolute to fixed and the top from 100% to 0px when the navbar hits the top of the screen…

I just can’t figure this out… please help! =)

RESOLVED! Like an idiot, I had accidentally added an interaction to the body class and it was causing major issues!

2 Likes

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.