File size: 3,538 Bytes
d8f56b1 53dcb25 4b8ff6b 561774a 57dfc0c 9176e69 9f0fc30 057e688 b50938f 9038e9e b47a09c 9038e9e 057e688 957d115 057e688 fe5cb7d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
import streamlit as st
import time
# --- Custom CSS ---
# WARNING: These selectors might change with Streamlit versions.
# Always inspect your app's HTML structure to confirm them.
# It's crucial to estimate or dynamically get the header's height.
# For this example, we'll assume a fixed header height (e.g., 3.5rem or 56px).
# You might need to adjust this value based on your Streamlit version and app title length.
HEADER_HEIGHT = "60px" # Adjust this value as needed
custom_css = f"""
<style>
/* Target the Streamlit header */
header[data-testid="stHeader"] {{
position: sticky !important;
top: 0 !important;
z-index: 1000 !important; /* High z-index to keep it on top */
background-color: #0F1116 !important; /* Match Streamlit's dark theme header or your preference */
/* If your header background is transparent or semi-transparent by default,
ensure you set a solid color to prevent content from showing through. */
}}
/* Target the main app view container to add padding AFTER the header */
/* This selector targets the container that holds the main page content */
section[data-testid="stAppViewContainer"] > div:first-child {{
padding-top: {HEADER_HEIGHT} !important;
}}
/* Fallback for older Streamlit versions or different structures if the above doesn't work.
You might need to find a more specific selector for the main content wrapper.
For example, some apps might be wrapped in a div directly under `section.main`.
*/
/*
.main .block-container {{
padding-top: {HEADER_HEIGHT} !important;
}}
*/
/* Ensure the sidebar scrolling is independent if needed,
though typically it is already. */
/*
section[data-testid="stSidebar"] {{
top: 0px; // If you want sidebar to also respect top
}}
*/
</style>
"""
st.markdown(custom_css, unsafe_allow_html=True)
# --- Your Streamlit App ---
st.title("Sticky Header App")
st.sidebar.header("Sidebar Content")
st.sidebar.write("This sidebar should scroll independently.")
for i in range(5):
st.sidebar.write(f"Sidebar Item {i+1}")
st.header("Main Application Content")
st.write(f"The header above should remain sticky. The top padding of this content section has been adjusted by approximately {HEADER_HEIGHT}.")
if st.button("Simulate Work (triggers status widget)"):
with st.spinner("Processing... Please wait."):
time.sleep(3)
st.success("Done!")
for i in range(50):
st.write(f"Scrollable content line {i + 1}.")
st.info(f"Current Date/Time in Al Khobar: {time.strftime('%Y-%m-%d %H:%M:%S %Z', time.localtime())} (Note: This is server time if deployed, or local time if run locally. Hugging Face Spaces run on UTC.)")
st.warning("Remember: The CSS selectors used here for the header and main content might change with Streamlit updates. You may need to re-inspect and adjust them.")
# --- SHARED ON ALL PAGES ---
st.logo(image="images/menu_book_60dp_75FBFD.png")
st.sidebar.title("SBS V2.0 mapper")
st.sidebar.subheader("(work in progress)")
st.sidebar.text("Demo by JA-RAD")
# --- PAGE SETUP ---
type_text_page = st.Page(
page="pages/type_text.py",
title="DEMO (work in progress)",
icon=":material/keyboard:",
default=True,)
# --- NAVIGATION SETUP ---
pg = st.navigation(pages=[type_text_page]) # WITHOUT SECTIONS
#pg = st.navigation({"Chapter_Index": [start_page], "Demo": [type_text_page, upload_file_page], "About": [about_page]}) # WITH SECTIONS
pg.run() |