My dwelling web page has 7 anchor factors that are the primary 7 objects on my menu. The final menu merchandise “Reservations is a separate web page.
After plenty of blundering work with minimal data I’ve javascript that highlights the proper menu merchandise when the house web page scrolls to the related anchor level. All the pieces appears to work high quality in Chrome and Safari. Works high quality for the cell menu too, at the least on iPhone in Safari. (white inactive, purple lively)
In Firefox it doesn’t work. Scrolling works high quality. Anchors all present lively (purple) when on the homepage. Any ideas on what would make Firefox distinctive?
Take a look at web site is right here https://hotelcasasadev.wpengine.com/
My code is right here https://codepen.io/mgason/pen/MWBmBjm?editors=0010
Video of the issue utilizing 3 browsers is right here https://www.veed.io/view/a2b10045-5b3f-4ebd-a2d0-5e6b4d16174e?panel=share
It appears to be working in my Firefox (albeit a bit sluggish). Have you ever cleared the cache and tried once more?
Fascinating, I’ve cleared cache many occasions, each domestically and at my host. Not simply web page cache however all cache at WPEngine. I’ve additionally shut my laptop down and restarted. I’m additionally testing in a brand new personal window in every browser every time.
Velocity clever I believe my hacked collectively from snippets code will not be superb. Any recommendations on that appreciated.
The menu objects are all in purple now in Chrome (aside from lodging) now so I suppose you might be engaged on the positioning in the intervening time.
Whenever you verify issues just like the scroll occasion and resize occasion then that causes a delay as they’re checked constantly. You must debounce the routines in order that they solely do their checks much less usually.
I’m not fairly positive whether or not you have been imagined to be altering the menu colour when somebody has scrolled down the web page manually or whether or not you have been simply altering the menu colour when clicked. It will be straightforward to alter the menu colour when clicked as you can simply add a category with js and use that to spotlight the menu merchandise.
Detecting the place on guide scroll is a bit more complicated although.
You don’t want js to scroll to a component today as CSS can do that with scroll-behavior…
1 Like
Sorry about that. I used to be making an attempt one thing. Eradicating the pointless (doc).prepared appeared to make it work in Firefox for me. It additionally appears a bit sooner.
I do change the menu merchandise colour when the consumer scrolls in addition to after they click on a menu merchandise. Any solutions for bettering this code appreciated. What do you imply by debounce the routines?
One other small bug I’ve seen. All anchor menu objects scroll to the best spot, but when I am going to the Reservations web page after which again to a anchor menu merchandise on the house web page, for instance About Us it goes to the best part however it’s aligned with the highest off display screen. Click on one other hyperlink and it will likely be high quality. It’s simply that preliminary Anchor after one other web page.
You may discover this useful.
As an alternative of utilizing scroll, you can think about using intersection observer as a substitute.
1 Like
I believe that’s the identical subject as when you go on to this web page.
https://hotelcasasadev.wpengine.com/#HomeContactUs
The js doesn’t detect the scroll place as you haven’t navigated from the menu.
You most likely want some js to question the url string on web page load and detect if there’s a fragment identifier within the url after which navigate to the proper part as earlier than. @rpg_digital would most likely have higher recommendation 
Be aware that you just don’t get that subject in my demo above (use debug mode to check) and you may hyperlink appropriately to the ingredient because the offset is dealt with in css alone. (In fact you’d nonetheless want js to spotlight the nav merchandise.)
