Pada tutorial sebelumnya, kita sudah mempelajari tentang Tutorial Belajar CSS Bagian 56 : Cara Menggunakan Selector nth-child di CSS. Pada tutorial kali ini kita akan belajar cara menggunakan CSS Sticky.
Properti CSS position digunakan untuk mengatur posisi suatu elemen. Ini juga digunakan untuk menempatkan item di belakang elemen lain dan juga berguna untuk efek animasi skrip.
“position: sticky;” digunakan untuk memposisikan elemen berdasarkan posisi gulir pengguna.
Properti CSS ini memungkinkan elemen untuk menempel ketika halaman digulir mencapai titik tertentu.
Tergantung pada posisi gulir, elemen sticky akan beralih antara tetap dan relatif. Elemen akan diposisikan relatif hingga posisi offset yang ditentukan terpenuhi di viewport.
Kemudian, mirip dengan position: sticky, elemen menempel di satu tempat.
Mari kita coba memahami properti CSS ini dengan menggunakan contoh.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
.stick{
position: sticky;
top:50px;
padding: 10px;
font-size:20px;
font-weight:bold;
background-color: lightblue;
border: 1px solid blue;
}
</style>
</head>
<body>
<h1>Scroll halaman dan lihat efeknya!</h1>
<div class = "stick">Sticky Element</div>
<div style = "padding-bottom:2000px">
<h2>Halo Dunia</h2>
<h2>Selamat datang di Mbah WP </h2>
</div>
</body>
</html>
Semoga tutorial CSS sticky ini membantu Anda untuk mengatur posisi suatu elemen dalam desain website Anda
0 Komentar