Update app.py

app.py

@@ -1,71 +1,62 @@
 import streamlit as st 
 
 # Set page config
-st.set_page_config(page_title="Experimental Solution", layout="wide")
+st.set_page_config(page_title="Virtual Sticky Header", layout="wide")
 
-# Use JavaScript to create and maintain a sticky header
-js_code = """
-<script>
-// Function to create sticky header
-function createStickyHeader() {
-    // Create header element
-    const header = document.createElement('div');
-    header.style.position = 'fixed';
-    header.style.top = '0';
-    header.style.left = '0';
-    header.style.width = '100%';
-    header.style.backgroundColor = '#262730';
-    header.style.color = 'white';
-    header.style.padding = '10px';
-    header.style.zIndex = '9999';
-    header.style.textAlign = 'center';
-    header.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';
-    
-    // Add content to header
-    header.innerHTML = `
-        <h3 style="display:inline-block; margin:0 20px;">My App Navigation</h3>
-        <a href="#section1" style="color:white; margin:0 10px;">Section 1</a>
-        <a href="#section2" style="color:white; margin:0 10px;">Section 2</a>
-        <a href="#section3" style="color:white; margin:0 10px;">Section 3</a>
-    `;
-    
-    // Append header to body
-    document.body.appendChild(header);
-    
-    // Add padding to top of body to prevent content from being hidden
-    document.body.style.paddingTop = (header.offsetHeight + 10) + 'px';
-}
+# Create a session state to track which section we're viewing
+if 'current_section' not in st.session_state:
+    st.session_state.current_section = "section1"
 
-// Initialize when DOM is loaded
-document.addEventListener('DOMContentLoaded', createStickyHeader);
-// Backup in case the first attempt fails
-setTimeout(createStickyHeader, 1000);
-</script>
-"""
+# Create columns for our layout
+col1, col2, col3 = st.columns([1, 2, 1])
 
-# Inject the JavaScript
-st.components.v1.html(js_code, height=0)
+# Function to create our "sticky" header
+def create_header():
+    with st.container():
+        st.markdown("### My Application")
+        tab1, tab2, tab3 = st.tabs(["Section 1", "Section 2", "Section 3"])
+        
+        with tab1:
+            if st.button("Go to Section 1"):
+                st.session_state.current_section = "section1"
+                st.experimental_rerun()
+        
+        with tab2:
+            if st.button("Go to Section 2"):
+                st.session_state.current_section = "section2"
+                st.experimental_rerun()
+        
+        with tab3:
+            if st.button("Go to Section 3"):
+                st.session_state.current_section = "section3"
+                st.experimental_rerun()
 
-# Add a small spacer for header
-st.markdown("<div style='height:60px;'></div>", unsafe_allow_html=True)
+# Create our header
+create_header()
 
-# Regular Streamlit content
-st.title("My Application")
-
-st.header("Section 1", anchor="section1")
-st.write("This is section 1 content")
-for i in range(10):
-    st.write(f"Content line {i}")
+# Display content based on the current section
+if st.session_state.current_section == "section1":
+    st.header("Section 1")
+    st.write("This is section 1 content")
+    for i in range(10):
+        st.write(f"Content line {i}")
+    
+elif st.session_state.current_section == "section2":
+    st.header("Section 2")
+    st.write("This is section 2 content")
+    for i in range(10):
+        st.write(f"Content line {i}")
+    
+elif st.session_state.current_section == "section3":
+    st.header("Section 3")
+    st.write("This is section 3 content")
+    for i in range(10):
+        st.write(f"Content line {i}")
 
-st.header("Section 2", anchor="section2")
-st.write("This is section 2 content")
-for i in range(10):
-    st.write(f"Content line {i}")
+# Add a "back to top" button at the bottom
+if st.button("Back to Top"):
+    st.experimental_rerun()
 
-st.header("Section 3", anchor="section3")
-st.write("This is section 3 content")
-for i in range(10):
-    st.write(f"Content line {i}")
 
 
 # --- SHARED ON ALL PAGES ---