Docs

[9gdesign]

This reply has been marked as private.

[Rad]

Hi there,

It’s somewhat random on my end. Scroll position is based on target section’s position plus navbar position. Example, section one is at 400px position + 100px navbar height, the final position is then calculated as 500px. Now, your navbar is changing size while scrolling and it changed to 50px. That means 450px scroll position, but it will still scroll to 500px because that’s the initially calculated value.

Then let’s add more contributing factor, the loading speed. The section may change its size as well due to loading elements and content and that could happen while you scroll.

The solution would be re-calculate the position for every scroll step, but that means recalculate and animate per scroll and per navbar change. That would cause performance issue. How about remove the sizing animation of the navbar? And just fix its size when it starts or before scrolling?

Thanks!

[9gdesign]

Hi,

If I’m understanding correctly, your 450/500px example is referring to the very first time the scroll nav is used (clicked on). That makes sense and I get that that’s pretty much unavoidable. It’s the behaviour that follows once the navbar has already shrunk that doesn’t make sense to me. I adapted the js to recalculate the navbar height every time a nav item is clicked. Yes there’s an impact on speed, but I wanted to at least make sure that it worked. so in theory, unless the user has returned to the top, i.e. exactly 0px scrollTop, the navbar should always be at it’s smaller height (50px in your example). However, somewhere the larger height is retained. I don’t see how the larger height could be getting stored again as the navbar wouldn’t adjust height unless the user scrolls right back to the top first.

Is it possible that the js files in the theme files that are running the scrollspy code initially are conflicting with the custom js running the similar code? That was the only explanation I could think of that made sense.

[Paul R]

Hi,

This line of code will reset the onclick event for scrollspy.

$('a[href*="#"]').off('touchstart click');

But unfortunately it doesn’t work in your site.
I have tested the code provided above in my test sites and it all worked without issues.

Do you have any customization in your child theme?

Would you mind providing us with ftp login credentials so we can take a closer look? To do this, you can make a post with the following info:

– FTP Host
– FTP username
– FTP password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Author]

Posts