How to use Position: Sticky Property In CSS
The .sidebar
class is applied to the sidebar div. The property position: -webkit-sticky;
and position: sticky;
are used to make the sidebar sticky. This means the sidebar will stick to the top of the screen when scrolling down. The property top:10px defines the sidebar should start from the 10 pixels from the top.
Example: Illustration of sidebar sticky on page scroll using position: sticky property.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Sticky Sidebar Example</ title > < style > body { font-size: 20px; font-family: Lato, sans-serif; } .wrapper { display: flex; } .main { width: 75%; height: 200vh; min-height: 1000px; display: flex; flex-direction: column; background: #fff; padding-left: 10px; } .sidebar { width: 25%; height: 100vh; min-height: 200px; overflow: auto; background: #a7e9c5; color: #48793c; position: -webkit-sticky; position: sticky; top: 10px; font-size: 25px; } .st-h3 { padding-left: 30px; } li { list-style: none; padding: 10px; } h2 { color: green; } </ style > </ head > < body > < div class = "wrapper" > < div class = "sidebar" > < h3 class = "st-h3" > GFG Sticky sidebar </ h3 > < ul > < li >Home</ li > < li >About us</ li > < li >Contact us</ li > < li >Our product</ li > </ ul > </ div > < div class = "main" > < h2 >w3wiki</ h2 > < h3 >Scroll down the page!</ h3 > < p >Sidebar sticky on page scroll</ p > < p > <!-- Main content goes here --> When the browser window is resized, the labels and inputs will stack on top of each other for smaller screens. To create a responsive inline form using CSS, use a container with flexible styling, such as Flexbox or Grid, to arrange form elements horizontally. Utilize media queries to adjust the layout for smaller screens, ensuring a user-friendly experience across various devices. Embark on an extraordinary coding odyssey with our groundbreaking course, "DSA to Development - Complete Coding Guide"! ???? Discover the transformative power of mastering Data Structures and Algorithms (DSA) as you venture towards becoming a Proficient Developer or Data Scientist. </ p > </ div > </ div > </ body > </ html > |
Output:
How to make a Sidebar Sticky on Page Scroll using CSS ?
A Sticky Sidebar contains important links and navigation options fixed on the screen, making it easy for users to access them while scrolling down. This improves the user experience by saving them from scrolling back to the top of the page to find essential information. We have used two different ways to achieve this effect including, position: fixed property and position: sticky property.
Table of Content
- Using Position: sticky Property
- Using Position: Fixed Property
Contact Us