Streaming live at 10am (PST)

Anchor Link Issues // Sticky Scrollable Nav


#1

I am working on a new site that is basically a web inspired version of an advent calendar. There are 31 sections with 31 corresponding anchor links in the nav bar. I have made the nav bar scrollable to comfortably house this many links, but I am looking for ways to:
A) Make the scrolling function have more of a sticky effect to it. So rather than just smooth, open scrolling I would like it to tick for each number block, or at the very least scroll in large sections.
B) I also am having a hard time figuring out how to hide or turn off the natural scroll bar that appears whenever you start to scroll in the navigation. I find this bar to be extremely distracting, especially the way that this current site is set up.

I am also having issues with my anchor links, some of them seem to work correctly and some dont. I have created an ID for each section and directed each link to that particular section, but am still having problematic results.

My read only link is:
https://preview.webflow.com/preview/grip-misguidance?preview=beba4c7311ed1752d82acaaf8326e2e0
You can view at:
grip-misguidance.webflow.io

Any help would be great! Thanks!
Riley


#2

Hi @rimann20, thanks for the post and interesting concept for the site, I can't wait to see the finished design :smile:

I wanted to ask if you can explain about point A and the "tick for each number block, or at the very least scroll in large sections" comment. I am not quite clear what your are trying to accomplish with that.

Regarding point B, you can set your body to overflow hidden, but that will also disable user scrolling on the page. There might be a way to do this in javascript or some custom css. I would like to hear what ideas others have :smile:

On the issues with Anchor links, can you give some examples of what link you have set, and what target ID in the site, so we can see how it is working?


#3

Sure thing. So when I said tick I was meaning rather than the scrolling functionality being completely smooth up and down, it would kind of grab or stick on the edge of the number blocks. I do not want it to be possible to stop scrolling and have a portion of a number block cropped by the top or bottom of the container, there ideally should be a very slight snap to the edge. At any time after scrolling, all visible blocks should be fitting perfectly within the nav bar. Think of how the spinning wheel of a game show acts.

In regards to the anchor links, the first colored section ("Avoid your family..") has a target ID of "Anchor-01". The "1" in the nav bar should anchor to this section. The "2" in the nav should anchor to the section after this ("Accidently send.."), and so on down the line. The idea is to have the user be able to click on whichever day of the month they choose in the nav and anchor to the stupid resolution that corresponds with it.

Thanks!


#4

Hey @rimann20

I was taking a look at your read-only link above and saw your note about the bar at the top of each section. These are appearing from the built in scroll offset of when you have a fixed navigation.

If you click on any of your nav links in your navigation bar, then navigate over to the settings panel, you will see a check box that says "Disable Scroll offset when fixed":smile:

This should remove the space at the top of each section when an anchor link is clicked. :smile:

Also it appears that your top link (the question mark) is set to link to ID of "anchor-01" and then your second link (the number "1") is linking to "anchor-02". Do you intend to have a section above the first section to link to for questions?

Please let me know if you need any additional help, I'm standing by for your reply.

Thank you,

Waldo :smile:


#5

Hi Waldo,

Thanks for your help on that, this is starting to feel much better!

In regards to the anchor links, the question mark will be linked to the first section of the site which will contain a brief summary of what the site is about (what is in there now is just place holder). I named the ID's in this manner because at first I thought that making all of the sections fall in numerical order might solve the issues I'm having with the anchor links not working properly, but unfortunately that did not work. Do you have any ideas as to why they are not behaving correctly?

Also, is there any way to have the landing section (the "?" section) sit above the navigation? I have it stacked that way currently in my Navigator panel, but the nav is still sitting above this section.

Thanks!


#6

Hey @rimann20

In regards to positioning the splash section to sit on top of the navigation, you'll need to give it a z-index that is higher than the navigation. The standard z-index of the navigation given by Webflow is 1000 (this makes the navigation sit above the other content).

So if you give your "Splash" section a z-index of say 1001, this will place the splash screen above the entire navigation. Is that the desired effect you're going for? I recommend having the navigation be easy to get to, or at least pointing the users down the page so that they know to scroll down. :smile:

For the Anchor Links, I would recommend changing the first anchor to maybe "anchor-question", and then going numerical for the rest (just so that it's easier to say, this one links to section 1, then the next to section 2). That may help resolve the anchor issue.

Please let me know if the above makes sense or if I am missing the point above.

Thank you,

Waldo


#7

Perfect! Thanks so much for your help, that was exactly what I was looking for!

You the man!


#8

Excellent! Super glad we were able to figure it out @rimann20 please let me know if you have any other questions in the future. :smile: Excited to see this site launch!

Thank you,

Waldo


#9

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