I am cross-posting this here to get more eyes on it:
Hi guys,
A couple months back I wanted to place links in a column container and have them stay in the same place (and stay in the container) when you scroll down the page. The effect can be seen here: https://bouzidanas-st-streamlit-code-editordocs0-getting-started-zaowoo.streamlit.app/
If you scroll down any of the pages, the links on the right stay in place. Not only that, the links will stay within their container so if you had some footer content after the column containers, the links will not end up covering or on top of it when you scroll all the way down.
In the example, I shared, I did this purely with markup in an st.markdown with unsafe_allow_html=True.
For another little project, I wanted to just float a container with vertically stacked Streamlit elements/widgets/components like st.title and st.radio.
I found a solution that works like a charm (in browsers that support css :has() psuedo-class so not firefox) and its very simple to implement and use. To implement you need:
html_style = '''
<style>
div:has( >.element-container div.floating) {
display: flex;
flex-direction: column;
position: fixed;
}
div.floating {
height:0%;
}
</style>
'''
st.markdown(html_style, unsafe_allow_html=True)
and then to float a container, just add the following to the container (make sure its inside):
st.markdown('<div class="floating"></div>', unsafe_allow_html=True)
Note: Because containers add gaps between st elements, an additional gap will be added when you add the above div. To sortof get around this, you can place the div after or before the content depending on what you prefer appearance-wise.
This is simple enough of a solution that I am not sure it needs to be turned into a component. Would anyone be interested in a component that adds the css and makes adding the div as simple as calling a function like float() ?
Example:
Also, I am not sure “floating” is what this effect is called…
