How to make the Streamlit header scroll with the main content?

Using Streamlit
1

In the current version of Streamlit (1.47.0), the generated HTML looks like this, where the element is always positioned absolutely and remains fixed at the top:

… …
----

I want the header to scroll away with the main content when the content inside overflows and the page is scrolled.

Is there a way to make the header behave this way?
Any ideas or suggestions would be appreciated. Thanks!

2 
st.html("""
    <style>
        [data-testid="stSidebar"] + div {
            overflow: auto;
        }

        [data-testid="stMain"] {
            overflow: hidden;
        }

        [data-testid="stHeader"] {
            position: static
        }
    </style>
""")