Basic Sticky Sidebar with Bootstrap 4
Content Section
.content-section {
min-height: 2000px;
}
.sidebar-section {
position: absolute;
height: 100%;
width: 100%;
}
.sidebar-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Position the items */
// &:nth-child(2) { top: 25%; }
// &:nth-child(3) { top: 50%; }
// &:nth-child(4) { top: 75%; }
}
.make-me-sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 0 15px;
}
/* Ignore This, just coloring */
body {
background: #fff;
}
article {
background: #f1f1f1;
border-radius: 12px;
padding: 25px 0 600px;
}
.title-section, .content-section, .sidebar-section {
background: #fff;
// border-radius: 12px;
// border: solid 10px #f1f1f1;
}
.title-section {
text-align: center;
padding: 50px 15px;
margin-bottom: 30px;
}
.content-section h2 {
text-align: center;
margin: 0;
padding-top: 200px;
}
.sidebar-item {
text-align: center;
h3 {
background: gold;
max-width: 100%;
margin: 0 auto;
padding: 50px 0 100px;
border-bottom: solid 1px #fff;
}
}
Basic Sticky Sidebar with Bootstrap 4
Content Section
.content-section {
min-height: 2000px;
}
.sidebar-section {
position: absolute;
height: 100%;
width: 100%;
}
.sidebar-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Position the items */
// &:nth-child(2) { top: 25%; }
// &:nth-child(3) { top: 50%; }
// &:nth-child(4) { top: 75%; }
}
.make-me-sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 0 15px;
}
/* Ignore This, just coloring */
body {
background: #fff;
}
article {
background: #f1f1f1;
border-radius: 12px;
padding: 25px 0 600px;
}
.title-section, .content-section, .sidebar-section {
background: #fff;
// border-radius: 12px;
// border: solid 10px #f1f1f1;
}
.title-section {
text-align: center;
padding: 50px 15px;
margin-bottom: 30px;
}
.content-section h2 {
text-align: center;
margin: 0;
padding-top: 200px;
}
.sidebar-item {
text-align: center;
h3 {
background: gold;
max-width: 100%;
margin: 0 auto;
padding: 50px 0 100px;
border-bottom: solid 1px #fff;
}
}