Cara Membuat Sticky Menu Dengan Bootrap Affix
Di panduan kali ini kamu akan belajar bagaimana cara membangun sticky fitur dengan bootrap affix .
di artikel sebelumnya saya telah memberikan panduan bagaimana cara membut bootstrap scrollspy nah bagi kali ini saya masih akan membahas bahan bootstrap yaitu cara membangun sticky fitur dengan bootrap affix.
nah apa itu bootstrap affix ? bootstrap fiix yakni diantara kelebihn bootstrap yang bermanfaat bagi membangun sebuah sticky fitur di bootstrap dengan gampang.
berikut code nya :
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset=utf-8>
<meta name=viewport content=width=device-width, initial-scale=1>
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>
/* Note: Try to remove the following lines to see the effect of CSS positioning */
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class=container-fluid style=background-color:#F44336;color:#fff;height:200px;>
<h1>Bootstrap Affix Example</h1>
<h3>Fixed (sticky) navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy=affix.</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>
<nav class=navbar navbar-inverse data-spy=affix data-offset-top=197>
<ul class=nav navbar-nav>
<li class=active><a href=#>Basic Topnav</a></li>
<li><a href=#>Page 1</a></li>
<li><a href=#>Page 2</a></li>
<li><a href=#>Page 3</a></li>
</ul>
</nav>
<div class=container-fluid style=height:1000px>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
</div>
</body>
</html>
untukmencobanya silahkan jalankan di browser kalin masing-masing dan cobalah bagi di scroll kebawh karenanya kamu akan melihat fitur atau navigasi akan menjadi sebuah sticky fitur.
oke itu saja bagi artikel mengenai cara membangun sticky fitur dengan bootrap affix , hingga bertemu di artikel berikutnya .
Sumber https://kursuswebsite.org
