Teman-teman pasti bertanya-tanya apa yang di maksud dengan judul diatas, jadi seperti ini, ketika teman-teman mempunyai sebuah website pasti ada judul atau logo ya, dan pasti judul dan logo itu masih tetap berada di atas, tapi ini beda yang di maksud dengan berada di atas disini adalah ketika kita scroll kebawah judul itu atau konten itu masih tetap berada di atas, penasaran kan oke jika penasaran simak terus ya untuk belajar membuat konten supaya tetap berada di atas.
Untuk membuat konten supaya tetap berada di atas, jika teman-teman sudah pernah bermain plugin javascript pasti pernah dengar yang namanya sticky menu, dimana menu itu akan tetap berada di atas walaupun kita scroll kebawah, jadi pengunjung ketika ingin pindah ke halaman lain, di mudahkan dengan adanya menu yang tetap berada di atas terus, jadi tidak perlu lagi repot-repot untuk scroll ke atas untuk memilih menu. Oke langsung saja bagaimana cara membuatanya:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>membuat <strong>konten </strong>supaya tetap berada di atas</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>membuat <strong>konten </strong>supaya tetap berada di atas</h1>
<div class="row bg-success">
<div class="col-md-6">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's <span class="d-block bg-warning"> standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span> . It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="col-md-6">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy <span class="d-block bg-success"> text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row" >
<div class="col-md-12" style="height: 2000px"><div class="sticky-top bg-warning text-center">Mencoba membuat sticky-top</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<-e-script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"><-e-/script>
<-e-script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"><-e-/script>
<-e-script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"><-e-/script>
</body>
</html>
jadi disini kita menggunakan class bawaan bootstrap yaitu sticky-top. bagaimana hasilnya:
posisi pertama konten berada pada di bawah artikel hijau itu ya.. setelah kita scroll ke bawah perhatikan:
dan seperti yang teman-teman liat walaupun saya scroll ke bawah samapi mentok posisi konten akan tetap berada di atas, bagaimana sangat unik ya, saya kira sampai disini saja belajar kita tentang membuat konten supaya tetap berada di atas, semoga bermanfaat dan sampai jumpa.
The post Membuat Konten Supaya Tetap Berada di Atas appeared first on Kursus Website Terbaik.