Update app.py

app.py

@@ -1,5 +1,76 @@
 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")