Update app.py

app.py

@@ -1,71 +1,72 @@
 import streamlit as st 
 
 # Set page config
-st.set_page_config(page_title="Hybrid Solution", layout="wide")
-
-# Create a custom HTML component just for the navigation
-nav_html = """
-<div style="position:fixed; top:0; left:0; width:100%; background-color:#262730; color:white; padding:10px; z-index:9999; text-align:center;">
-    <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>
-</div>
-<div style="height:50px;"></div>
+st.set_page_config(page_title="Experimental Solution", 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';
+}
+
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', createStickyHeader);
+// Backup in case the first attempt fails
+setTimeout(createStickyHeader, 1000);
+</script>
 """
 
-# Inject the navigation HTML
-st.components.v1.html(nav_html, height=50)
+# Inject the JavaScript
+st.components.v1.html(js_code, height=0)
+
+# Add a small spacer for header
+st.markdown("<div style='height:60px;'></div>", unsafe_allow_html=True)
 
-# Regular Streamlit content with anchors
+# Regular Streamlit content
 st.title("My Application")
 
 st.header("Section 1", anchor="section1")
 st.write("This is section 1 content")
-for i in range(5):
+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(5):
+for i in range(10):
     st.write(f"Content line {i}")
 
 st.header("Section 3", anchor="section3")
 st.write("This is section 3 content")
-for i in range(5):
-    st.write(f"Content line {i}")
-
-st.header("Section 4", anchor="section4")
-st.write("This is section 1 content")
-for i in range(5):
-    st.write(f"Content line {i}")
-
-st.header("Section 5", anchor="section5")
-st.write("This is section 2 content")
-for i in range(5):
-    st.write(f"Content line {i}")
-
-st.header("Section 6", anchor="section6")
-st.write("This is section 3 content")
-for i in range(5):
+for i in range(10):
     st.write(f"Content line {i}")
 
-st.header("Section 7", anchor="section7")
-st.write("This is section 1 content")
-for i in range(5):
-    st.write(f"Content line {i}")
-
-st.header("Section 8", anchor="section8")
-st.write("This is section 2 content")
-for i in range(5):
-    st.write(f"Content line {i}")
-
-st.header("Section 9", anchor="section9")
-st.write("This is section 3 content")
-for i in range(5):
-    st.write(f"Content line {i}")
-
-
 
 # --- SHARED ON ALL PAGES ---
 st.logo(image="images/menu_book_60dp_75FBFD.png")