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.
Using Position: Sticky Property
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.
<!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 >GeeksforGeeks</ 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:
Using Position: Fixed Property
The element with .sidebar
class is applied to the sidebar div. The CSS property position: fixed;
is used to make the sidebar fixed. This means the sidebar will stay in a fixed position on the screen, even when scrolling down. The property top:10px defines the sidebar should start from the 10pixels from top.
Example: Illustration of sidebar sticky on page scroll using position: fixed property.
<!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: 70%;
height: 200vh;
min-height: 1000px;
display: flex;
flex-direction: column;
background: #fff;
padding-left: 10px;
position: absolute;
left: 25vw;
}
.sidebar {
width: 25%;
height: 100vh;
min-height: 200px;
overflow: auto;
background: #beddf0;
color: #48793c;
position: fixed;
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 >GeeksforGeeks</ 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.
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: