I am using quarto to render a static html file and I am using both a tabset panel layout, in which I have also put a sidebar panel (https://quarto.org/docs/interactive/layout.html#sidebar-panel).

The page is however long, so that I need to scroll down to get to the bottom; I would like the sidebar panel to be “fixed” when I scroll the page, and to scroll only if I hover it. This behavior should be achieved by putting position:sticky to the panel-sidebar container, but I have been unable to make it work so far. Any idea why I cant get this to work? see a reproducible example below:

---
title: "Test"
title-block-banner: true
format:
  html:
    theme: default
---

```{css, echo=FALSE}
.panel-sidebar {
  position:sticky
}
```

::: panel-tabset

## Test1

::: panel-fill
A long list of things and a long table:

```{r}
library(tidyverse)
library(reactable)
reactable(mtcars, defaultPageSize=100)
```
:::

::: panel-sidebar
Something that I want to be stick on top when I scroll the page
:::
:::