Update app.py

app.py

@@ -16,9 +16,42 @@ def setup_page():
         st.write(df_chapters.head())
 
 
+    custom_css = f"""
+    <style>
+        /* Making the Streamlit header sticky */
+        {HEADER_SELECTOR} {{
+            position: -webkit-sticky !important; /* For Safari */
+            position: sticky !important;
+            top: 0 !important;
+            z-index: 9999 !important; /* Very high z-index */
+            background-color: #90EE90 !important; /* Or your app's header background color */
+            /* Add a subtle shadow to make it feel more distinct when content scrolls under */
+            /* box-shadow: 0 2px 4px -1px rgba(0,0,0,0.1); */
+            /*.reportview-container .main .block-container{{ */
+            /*    padding-top: 0rem; */
+            /* }} */
+        }}
 
+        /* Adding padding to the main content area to prevent overlap with the sticky header */
+        {MAIN_CONTENT_SELECTOR} {{
+            padding-top: 10px !important; /* {HEADER_HEIGHT} !important; */
+            /* background-color: yellow !important; */
+            /* border-style: solid !important; */
+            /* border-color: red !important; */
+        }}
+
+        /* Optional: If your app is set to wide mode and the header isn't spanning full width */
+        /* This might be needed if the sticky positioning affects its width calculation. */
+        /*
+        #{HEADER_SELECTOR} {{
+        #    width: 100% !important;
+        #}}
+        #*/
+    </style>
+    """
         
 
 if __name__ == "__main__":
+    st.markdown(custom_css, unsafe_allow_html=True) 
     st.set_page_config(page_title="Sticky Header test", layout="wide")
     setup_page()