Scribd Logo
Upload

Welcome to Scribd!

  • Resume Bootstrap: Scrollspy: Maka Hasil Akhirnya Adalah

    Uploaded by

    Ryan Fathony
    26 views1 page
    ScrollSpy

    Original Title

    5211840000109

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    ScrollSpy

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    26 views1 page

    Resume Bootstrap: Scrollspy: Maka Hasil Akhirnya Adalah

    Uploaded by

    Ryan Fathony
    ScrollSpy

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 1

    DOOHAN RYAN FATHONY

    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

    ion bar while scrolling!</p>

    </div>

    <div id="section32" class="container-fluid" style="padding-top:70px;padding-bottom:70px" background="white">

    <h1>Section 3 Submenu 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>

    Maka hasil akhirnya adalah : Perhatikan bahwa dia ada di bagian


    Section 2 maka navbar menunjukan
    di ada di Section 2.

    Scrollspy ditujukan pada website


    yang single page.

    Penggunaan: data-spy=”scroll”.

    You might also like