File size: 2,740 Bytes
d8f56b1 53dcb25 f9acfdd cbb5f8e 97aea69 71977e3 cbb5f8e f9acfdd cbb5f8e f9acfdd cbb5f8e f9acfdd d98a4da f9acfdd cbb5f8e f9acfdd 34e2892 f9acfdd cbb5f8e 561774a 34e2892 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 |
import streamlit as st
# Set page config
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 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
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}")
st.header("Section 2", anchor="section2")
st.write("This is section 2 content")
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(10):
st.write(f"Content line {i}")
# --- 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() |