Sticky Table of content in Restaurants and food websites

Reference Link

These kinds of resources are quite common, but I am looking for guidance on how does this works. If I look at the code in the browser there are sections and classes, not even IDs.

When we scroll menus get highlighted and also headline changes, this could be achieved through the sticky css feature, I visualize so.

If someone has an example and can please share an example, which is more narrowed down. I hope it will be possible through HTML/CSS w/o accessing JS scroll features.

You will need js to do this properly and there’s a good article here that does what you want.

It uses mutationObserver rather than hijacking the scroll event so is more performant.

You can do sticky headers for each section in css but if you want to highlight them when sticky or highlight a nav item then you need some js for this.

I have some old demos a little bit similar but they mostly use the scroll event and really need to be updated.


https://codepen.io/paulobrien/pen/EjwdeG
https://codepen.io/paulobrien/pen/rzoNRB

1 Like

Thanks sir, I have also changed the headline to be more sepcific and relevant.

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