Assalamualaikum Wr.Wb
Pada postingan kali ini saya akan menjelaskan tentang bootstrap Affix,apa itu bootstrap affix yaitu misalnya ada sebuah navbar yang letaknya tidak persis di atas agak di bawah konten header misalnya,lalu jika di scroll ke atas sampai navbar tersebut sudah sampai di ujung atas maka navbar itu akan fixed.Baiklah mari kita mulai saja.
Pada postingan kali ini saya akan menjelaskan tentang bootstrap Affix,apa itu bootstrap affix yaitu misalnya ada sebuah navbar yang letaknya tidak persis di atas agak di bawah konten header misalnya,lalu jika di scroll ke atas sampai navbar tersebut sudah sampai di ujung atas maka navbar itu akan fixed.Baiklah mari kita mulai saja.
- Tuliskan script di bawah,script ini sudah saya ubah sedikit stylenya dengan css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.affix{
top: 0;
width: 100%;
}
.affix + .container-fluid{
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color: #009900; color: #fff; height:200px;">
<h1>Contoh Bootstrap Affix</h1>
<h3>Scroll untuk melihat contoh affix</h3>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Blog Amatir</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</nav>
<div class="container-fluid" style="height: 1000px">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
Berikut hasilnya sebelum di scroll ke bawah
Ya itu tadi sedikit mengenai Affix semoga bermanfaat, walaupun masih banyak kekurangan sampai jumpa di postingan berikutnya terimakasih sudah berkunjung.
Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb
0 komentar:
Posting Komentar