How to fix element position in <Scroll html>?

[czrest]

Basically I want a navigation menu that scrolls to a specific page. I have a navigation menu header with buttons for each sections of my page to scroll into view inside Scroll html and I want it to stick at the top of my page in a fixed position but I can't seem to make it work. I have a vague idea of what might be causing it and my fix is to put it outside of my canvas. But then the references needed for my buttons to scroll into view are inside Scroll html. Are there any advice or solution on how I can achieve this?

[Sarveshwaran20]

To fix an element's position in a scrolling HTML document, you can use CSS with the position: fixed; property. Apply this style to the element you want to remain fixed while scrolling. For example:

<style> #fixedElement { position: fixed; top: 0; left: 0; } </style>

Adjust the top and left values according to your layout preferences. This will keep the specified element fixed at the top left corner of the viewport as you scroll.

[Sarveshwaran20]

This might work

[czrest]

It does not work with < Scroll html >

It positions to top but does not follow the scroll just like how absolute will react

Here's the structure of my code

<Canvas gl={{ preserveDrawingBuffer: true }} shadows>
      <ScrollControls pages={6} distance={2} damping={0.5} maxSpeed={0.8}>
            <SheetProvider sheet={sheet}>
                  <Scene />
            </SheetProvider>
            <Scroll html>
                  <Header/>
                  <Sections/>
            </Scroll>
      </ScrollControls>
</Canvas>

[czrest]

Ahh found my answer here #1126