Professional Documents
Culture Documents
05211840000109
PW-A
RESUME BOOTSTRAP: SCROLLSPY
Pada pembahasan kali ini adalah mengenai penggunaan bootstrap serta javascript untuk
membuat scrollspy. Apa itu scrollspy ? Jadi scrollspy dapat membuat navigation bar dari web yang
diliat dapat terupdate secara otomatis ketika kita sedang di bagian tertentu. Scrollspy sendiri
mempunyai syarat seperti harus ada navbar. Biasanya scrollspy ada di website yang bersifat singe
page. Penggunaanya dengan menulis data-spy=”scroll”. Source code :
<html>
<head>
<title>Pengenalan UI Framework</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Section 3
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#section41">Link 1</a>
<a class="dropdown-item" href="#section42">Link 2</a>
</div>
</li>
</ul>
</nav>
<div id="section1" class="container-fluid" style="padding-top:70px;padding-bottom:70px" background="white" >
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigat
ion bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid" style="padding-top:70px;padding-bottom:70px" background="white">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigat
ion bar while scrolling!</p>
</div>
<div id="section31" class="container-fluid" style="padding-top:70px;padding-bottom:70px" background="white">
<h1>Section 3 Submenu 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigat
</div>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigat
</div>
Penggunaan: data-spy=”scroll”.