"Sticky Position Element Stick to Top One By One"
Bootstrap 4.1.1 Snippet by mani88100ni

Post to Facebook Tweet this

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="spacer"></div>
<div class="wrap">
<div>
<div class="sticky">
<h1>tesst 1</h1>
<p>lorem ipsum</p>
</div>
</div>
<div></div>
</div>
<div class="wrap">
<div>
<div class="sticky">
<h1>tesst 2</h1>
<p>lorem ipsum</p>
</div>
</div>
<div></div>
</div>
<div class="wrap">
<div>
<div class="sticky">
<h1>tesst 3</h1>
<p>lorem ipsum</p>
</div>
</div>
<div></div>
</div>
<div class="spacer"></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
.spacer {
height: 40vh;
}
.wrap {
display: flex;
/*align-items: flex-start;*/
}
.wrap > div {
flex: 1;
text-align: center;
}
/*.wrap > div:nth-child(1) {
position: -webkit-sticky;
position: sticky;
top: 0;
padding-top: 100px;
}*/
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 100px 0;
}
.wrap > div:nth-child(2) {
background: red;
height: 200vh;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard Angular
Transparent Sticky NavBar
bootstrap 4 multiple carousel (3 Element by row)
Easy Sticky Footer

Questions / Comments: