position: sticky;
1)In this example , we will use position: sticky; property on div1
CASE 1) When we haven't used the position: sticky; property
CASE 2) When we have used position: sticky; property in div1
TRY THE OUTPUT YOURSELF:
HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="parent">
<div id="relative"> Relative div</div>
<div id="div1"> This is sticky div</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate dolorum sapiente, rerum ad tempore nesciunt omnis quam aut doloremque autem quibusdam amet consequatur, sed o
exercitationem et. Nulla sit quis amet pariatur? Officiis veniam, vero consectetur ipsum dolores maxime nam.
Vitae, voluptatem commodi enim ratione quaerar</P>
</div>
</body>
</html>
CSS file:
body{
background: #fff;
margin: 0;
}
#div1{
background: orange;
position:sticky;
top:10px;
}
#relative{
position: relative;
background: red;
width:200px;
height:50px;
}
CASE 3) When position sticky is used top 0px:
TRY THIS OUT YOURSELF TOO AND SEE THE OUTPUT:
HTML FILE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="parent">
<div id="relative"> Relative div</div>
<div id="div1"> This is sticky div</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate dolorum sapiente, rerum ad tempore
nesciunt omnis quam aut doloremque autem quibusdam amet consequatur, sed o
exercitationem et. Nulla sit quis amet pariatur? Officiis veniam, vero consectetur ipsum dolores maxime nam.
Vitae, voluptatem commodi enim ratione quaerar</P>
</div>
</body>
</html>
CSS FILE:
body {
background: #fff;
margin: 0;
}
#div1 {
background: orange;
position: sticky;
top: 0px;
}
#relative {
position: relative;
background: red;
width: 200px;
height: 50px;
}
Comments
Post a Comment