Sticky/fixed container for streamlit apps. Supports dynamic width change as well as dynamic color updates. Both top/bottom positions are available.

st_fixed_container.py

from typing import Literal

import streamlit as st
from streamlit.components.v1 import html


FIXED_CONTAINER_CSS = """
div[data-testid="stVerticalBlockBorderWrapper"]:has(div.fixed-container-{id}):not(:has(div.not-fixed-container)) {{
    position: {mode};
    width: inherit;
    background-color: inherit;
    {position}: {margin};
    z-index: 999;
}}

div[data-testid="stVerticalBlockBorderWrapper"]:has(div.fixed-container-{id}):not(:has(div.not-fixed-container)) div[data-testid="stVerticalBlock"]:has(div.fixed-container-{id}):not(:has(div.not-fixed-container)) > div[data-testid="stVerticalBlockBorderWrapper"] {{
    background-color: inherit;
    width: 100%;
}}

div[data-testid="stVerticalBlockBorderWrapper"]:has(div.fixed-container-{id}):not(:has(div.not-fixed-container)) div[data-testid="stVerticalBlock"]:has(div.fixed-container-{id}):not(:has(div.not-fixed-container)) > div[data-testid="element-container"] {{
    display: none;
}}


div[data-testid="stVerticalBlockBorderWrapper"]:has(div.not-fixed-container):not(:has(div[class^='fixed-container-'])) {{
    display: none;
}}
""".strip()

FIXED_CONTAINER_JS = """
const root = parent.document.querySelector('.stApp');
let lastBackgroundColor = null;

function updateContainerBackground(currentBackground) {
    const containerElements = getContainers();
    containerElements.forEach(containerElement => {
        containerElement.querySelectorAll('div[data-testid="stVerticalBlockBorderWrapper"]').forEach(wrapper => {
            wrapper.style.backgroundColor = currentBackground;
        });
    });
}

function getContainers() {
    innerElements = parent.document.querySelectorAll('div[class^="fixed-container-"]');
    return Array.from(innerElements).map(el => el.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement);
}

function checkForBackgroundColorChange() {
    const currentBackgroundColor = window.getComputedStyle(root).backgroundColor;
    if (currentBackgroundColor !== lastBackgroundColor) {
        lastBackgroundColor = currentBackgroundColor; // Update the last known value
        updateContainerBackground(lastBackgroundColor);
    }
}

const observerCallback = (mutationsList, observer) => {
    for(let mutation of mutationsList) {
        if (mutation.type === 'attributes' && (mutation.attributeName === 'class' || mutation.attributeName === 'style')) {
            checkForBackgroundColorChange();
        }
    }
};

const main = () => {
    checkForBackgroundColorChange();

    const observer = new MutationObserver(observerCallback);
    observer.observe(root, { attributes: true, childList: false, subtree: false });
}

main();
""".strip()


MARGINS = {
    "top": "2.875rem",
    "bottom": "0",
}


counter = 0


def st_fixed_container(
    *,
    height: int | None = None,
    border: bool | None = None,
    mode: Literal["fixed", "sticky"] = "fixed",
    position: Literal["top", "bottom"] = "top",
    margin: str | None = None,
):
    if margin is None:
        margin = MARGINS[position]
    global counter

    fixed_container = st.container()
    non_fixed_container = st.container()
    css = FIXED_CONTAINER_CSS.format(
        mode=mode,
        position=position,
        margin=margin,
        id=counter,
    )
    container = fixed_container.container(height=height, border=border)
    with fixed_container:
        html(f"<script>{FIXED_CONTAINER_JS}</script>", scrolling=False, height=0)
        st.markdown(f"<style>{css}</style>", unsafe_allow_html=True)
        st.markdown(
            f"<div class='fixed-container-{counter}'></div>",
            unsafe_allow_html=True,
        )
    with non_fixed_container:
        st.markdown(
            f"<div class='not-fixed-container'></div>",
            unsafe_allow_html=True,
        )
    counter += 1
    return container


if __name__ == "__main__":
    for i in range(30):
        st.write(f"Line {i}")

    # with st_fixed_container(mode="sticky", position="top", border=True):
    # with st_fixed_container(mode="sticky", position="bottom", border=True):
    # with st_fixed_container(mode="fixed", position="top", border=True):
    with st_fixed_container(mode="fixed", position="bottom", border=True):
        st.write("This is a fixed container.")
        st.write("This is a fixed container.")
        st.write("This is a fixed container.")

    st.container(border=True).write("This is a regular container.")
    for i in range(30):
        st.write(f"Line {i}")