Jinsi ya Kutengeneza Sticky Sidebar kwa Multi-Section Layout

Sticky Sidebar inabaki juu ya screen unaposcroll, ikiruhusu navigation au important content kuonekana wakati wote. Ni mzuri kwa blogs, dashboards na multi-section websites.

✅ HTML Example
<div class="layout">
<aside class="sidebar">
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</aside>

<main class="content">
<section id="section1"><h2>Section 1</h2><p>Content...</p></section>
<section id="section2"><h2>Section 2</h2><p>Content...</p></section>
<section id="section3"><h2>Section 3</h2><p>Content...</p></section>
</main>
</div>

✅ CSS (Sticky Sidebar + Multi-Section Layout)
.layout {
display: flex;
gap: 20px;
padding: 20px;
}

/* Sidebar */
.sidebar {
flex: 0 0 200px;
position: sticky;
top: 20px;
background: #0d6efd;
color: #fff;
padding: 20px;
border-radius: 10px;
height: fit-content;
}

.sidebar ul {
list-style: none;
padding: 0;
}

.sidebar li {
margin-bottom: 15px;
}

.sidebar a {
color: #fff;
text-decoration: none;
}

.sidebar a:hover {
text-decoration: underline;
}

/* Main content */
.content {
flex: 1;
}

.content section {
margin-bottom: 50px;
padding: 20px;
background: #f0f0f0;
border-radius: 10px;
}

✅ Jinsi Inavyofanya Kazi

position: sticky; top: 20px → Sidebar inashikilia position pale unaposcroll

Flexible layout → display: flex + flex: 1 content area

Multi-section layout → sections zinabaki independent, sidebar haibadiliki

🔗 Links Za Kujifunza Zaidi

🌐 Faulink Official Website:
https://www.faulink.com/

📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php

📲 WhatsApp Msaada:
https://wa.me/255693118509