streamlit_float.py

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


def st_float_container(
    *,
    border: bool = None,
    align: str = None,
    key: str = None,
    css: str = None,
    js: str = None,
    style: str = None,
    **kwargs,
):
    """
    Custom Streamlit container with floating capabilities and style customization.

    :param border:     Enable/disable container border
    :param align:      Horizontal alignment: `left`, `right` or `center`
    :param key:        Unique identifier for the container
    :param css:        Custom CSS styles (use `>>` as container selector)
    :param js:         Custom JavaScript code
    :param style:      Inline CSS styles for the container
    :param kwargs:     Additional CSS properties in camelCase format
    """

    def camel_to_kebab(s):
        return "".join(
            [
                "-" + c.lower() if i and c.isupper() else c.lower()
                for i, c in enumerate(s)
            ]
        )

    if key is None:
        key = str(int(time.time() * 1000))
    if css:
        css = css.replace(">>", f".st-key-st_float_container_{key} ")
    if js is None:
        js = ""
    else:
        js = js.replace("`", r"\`").replace("$", r"\$")

    if style is None:
        style = ""
    align = {"left": "flex-start", "right": "flex-end"}.get(align, "center")

    if kwargs:
        if "position" not in kwargs:
            style += "position:fixed;"
            if "zIndex" not in kwargs:
                style += "z-index:999999;"
        if not style.strip().endswith(";"):
            style += ";"
        style += ";".join([f"{camel_to_kebab(k)}:{v}" for k, v in kwargs.items()]) + ";"

    class _st_container(st._DeltaGenerator):
        def __enter__(self):
            super().__enter__()
            st.html(f"""
<style>
.st-key-st_float_container_{key}>div:last-child {{
    display: none !important;
}}
.st-key-st_float_container_{key}>div>div {{
    display: flex;
    justify-content: {align};
}}

{css}
</style>""")

        def __exit__(self, type, value, traceback):
            html(
                f"""
<script>
    let doc = window.parent.document;
    let elems = doc.getElementsByClassName("st-key-st_float_container_{key}");
    if (elems.length > 0) {{
        let container = elems[0].parentNode.parentNode;
        container.style = "{style}";
        if (container.getElementsByTagName('script').length == 0) {{
            const html = `{js}`;
            if (html != "") {{
                let script = doc.createElement("script");
                script.innerHTML = html;
                container.appendChild(script);
            }}
        }}
    }}
</script>""",
                width=0,
                height=0,
            )
            super().__exit__(type, value, traceback)

    _container = st.container(border=border, key=f"st_float_container_{key}")

    return _st_container(
        _container._root_container,
        cursor=_container._cursor,
        parent=_container._parent,
        block_type=_container._block_type,
    )


# Usage Example:

## Implementation Example 1: Back-to-top button
with st_float_container(
    width="80px",
    right="20px",
    bottom="20px",
    css="""
#st_back_to_top {
    transform: scale(0);
    transition: all 0.6s ease-in-out;
    font-size: 30px;
    background-color: white;
    border: 0;
    border-radius: 5px;
    padding: 0;
}
""",
    js="""
let btn = document.getElementById("st_back_to_top");
if (btn) {
    let stMain = document.querySelector(".stMain");
    if (stMain) {
        stMain.addEventListener("scroll", function() {
            btn.style.transform = stMain.scrollTop > 1 ? "scale(1)" : "scale(0)";
        });
        btn.addEventListener("click", function() {
            stMain.scrollTo({ top: 0, behavior: "smooth" });
        });
    }
}
""",
):
    st.html("<button id='st_back_to_top'>🔝</button>")

## Implementation Example 2: Code display toggle
with st_float_container(
    border=True,
    width="120px",
    top="60px",
    left="calc(50% - 60px)",
    backgroundColor="white",
):
    show_code = st.toggle("code")

if show_code:
    st.header("Code")
    st.code(open(__file__, "r").read(), line_numbers=True)