How can I create a header in web which will always stick to the top?

[dbobrzyk]

Hello, I recently started using kobweb for creating my own website. I was using jetpack compose UI earlier. But I have weird issue with creating an element which will always stick to the top when scrolling rest of the content site.

Normally I would just create a Box with a header and a column and it would work, like this:

    Box(
        modifier = Modifier
            .fillMaxWidth()
    ) {
        //Sticky header
        MainHeader()

        // Scrolling Content
        Column(
            modifier = Modifier.fillMaxSize()
        ) {
            PageContent()
            PageContent()
            PageContent()
        }
    }

But websites are working a little different, and the whole page is scrolling including "sticky header". How can I resolve this in Kobweb?

Thank you in advance for any help :)

[bitspittle]

Yeah the web way to do this is to set the element's "Position" CSS property.

Here, you want "fixed" I believe: https://developer.mozilla.org/en-US/docs/Web/CSS/position

You can review how I'm doing this with my blog site:
https://github.com/bitspittle/bitspittle.dev/blob/4fbdf7d3774b065a9106afd6241464f6aa6b095b/site/src/jsMain/kotlin/dev/bitspittle/site/components/sections/NavHeader.kt#L45

(See in action here: https://bitspittle.dev/blog/2022/kotlinsite)