Streaming live at 10am (PST)

Linking to page section kills interaction

Hey all,

I’ve been working on a site for a client and I’ve run into a problem. They wanted to keep a header on every page and I’ve used Symbols to make that happen. After further review, they decided that they wanted the menu links to jump down to the content past the header but they wanted hero to stay on the page.

The obvious dilemma is that you can’t see a menu on load now and the menu we used didn’t look good as a sticky nav so I needed a second navigation bar.

I added it and used interactions to make it appear once you scrolled out of the header and into the page content section.

The problem is that if my menu links are /page#content then the interaction doesn’t work. I tried reversing it and using the page section to define when the menu appears. The problem is on a larger monitor it’s going to automatically appear. Anyone have any ideas?

Can I create a pause on page load and then let it scroll to the section so it will load? Any help would be GREATLY appreciated!!

Thanks. Below is my public share link.

Here is my public share link: LINK
(how to access public share link)

Hello @rileyrichter,

I know what you mean, have exactly the same problem with one of my site.
But really I understood, it is not “killed interaction”. It is just that with this kind of page appearance, that part of the interaction, which activates “sticky nav” appearance does not work.

Will show on your example:

1st part of interaction will not activate until header will not scroll into view, which is not happen when we use linking like this.

Just now I got an idea of workaround: create one more interaction with Scroll trigger, for the element, which is scrolling into view only when page is opening with in-page linking.

Example: on the “About” page such element can be the image. It is scrolling into view when you got to that page from menu-linking. So you DO NOT REMOVE any other existing interaction, but create interaction on scroll for that image (only scroll into view part), which effect sticky nav.

Hope I was able to explain my idea :smile:

Will go to try it on my site too


@sabanna - thanks for the info! Yes, the interaction is still there but it’s just not working.

I don’t understand your work around. What image are you mentioning that I should add an interaction to?

I am sorry for my crazy bad English :smiley: too excited with an idea! It is working:

So, will try to explain more correctly.

Right now the only step which activate “sticky nav” appearance is a header - scrolling OUT of view. Workaround: to add one more interaction to the object, which scrolling INTO view, when page loading with in-page linking

1 Like

In my site example, I have 1- landing page with few sections and 2 - contact us page. All links from “Contact us” page linking to the sections on the first page. So I created interaction with scroll trigger, which affect my “fixed” navbar and connected this interaction to every section.

1 Like

Your english is fine! :slight_smile: I think I’m just running on fumes and not comprehending everything. The problem is that if I add an interaction to my section holding the content if someone has a large monitor where that section is in view then the menu will load over the header and I don’t want that. I feel like I’m stuck since I don’t have my header set to fill the screen.

Does that make sense?

I understand your “fears” but all you really need is find the object, which appears on the screen view only when “hero section” scrolling out of view. As I mentioned, for example, on About page it could be an image (right under “Hudson Sandler”). Also, you could make Hero section height in VH, which will exclude the possibility to be both that elements on the screen at the same time.

1 Like

I completely get what you’re saying but I’m left to guess whether it will work on all monitor sizes. :frowning:

And yes, I could make the Hero 100% (which I would prefer), but my client does not like that. Ugh. I’m left to struggle. I really appreciate all your help. In any other situation all your ideas would work so well!!

Well… I am sorry you stuck in such situation. :confused:

Hope your client will be able to understand that you could make Hero height= 40vh (instead of 450 px) and it would take the same percentage of screen on any monitor + would help to fix this “bug” with sticky nav .

1 Like

Thanks so much for your help and your time! I really appreciate it! :slight_smile:

1 Like

You are welcome! :smile:
Best benefits from this - I learn even more and sometimes even fixing my own problems LOL


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