Cara membuat Pushpin dengan MaterializeCSS

Materialize pushpin adalah sebuah plugin yang berfungsi untuk memberikan posisi fixed pada sebuah konten, kita bisa menggunakan pushpin untuk membuat sticky pada elemen html. Plugin hari ini sangat berguna untuk digunakan ketika ingin membuat  sticky element pada halaman tertentu. Atau kalian juga bisa membuat sebuah halaman parallax dengan pushpin ini.

Untuk membuat pushpin dengan materialize, mari kita buat beberapa navbar dengan class .pushpin-sticky (nama class nya bisa kalian sesuaikan sendiri )

<div id="red" class="block red lighten-1">
  <nav class="pushpin-sticky" data-target="red">
    <div class="nav-wrapper red">
      <div class="container">
        <a href="#" class="brand-logo">Red</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><a href="#!">Red Link 1</a></li>
          <li><a href="#!">Red Link 2</a></li>
          <li><a href="#!">Red Link 3</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

Sekarang kita akan membuat sejumlah style agar kita bisa melihat hasilnya, disini saya akan menambahkan height dan warna background pada body, kalian bisa copy kode dibawah ini

body{
    height: 3000px;
    background:#ab47bc;
}

 

Dan selanjutnya kita perlu mengaktifkannya menggunakan beberapa baris jquery, pastikan class pada div diatas sesuai dengan baris kode jquery dibawah ini.

// Pushpin Demo Init
    if ($('.pushpin-sticky').length) {
      $('.pushpin-sticky').each(function() {
        var $this = $(this);
        var $target = $('#' + $(this).attr('data-target'));
        $this.pushpin({
          top: $target.offset().top,
          bottom: $target.offset().top + $target.outerHeight() - $this.height()
        });
      });
    }

Dengan begitu pushpun sudah bisa digunakan.

Untuk lebih jelasnya kalian coba copy kode dibawah ini dan simpan dengan nama pushpin.html

<!DOCTYPE html>
<html>

<head>
  <title>Discovery Button</title>
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
    <style>
        body{
    height: 4000px;
    background:#ab47bc;
}

#green{
   height: 500px;
   background: green
}
#red{
   height: 500px;
}
    </style>
  <!--Import Google Icon Font-->
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>


<div id="red" class="block red lighten-1">
  <nav class="pushpin-sticky" data-target="red">
    <div class="nav-wrapper red">
      <div class="container">
        <a href="#" class="brand-logo">Red</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><a href="#!">Red Link 1</a></li>
          <li><a href="#!">Red Link 2</a></li>
          <li><a href="#!">Red Link 3</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

<div id="green" class="block green lighten-1">
  <nav class="pushpin-sticky" data-target="green">
    <div class="nav-wrapper green">
      <div class="container">
        <a href="#" class="brand-logo">Green</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><a href="#!">Green Link 1</a></li>
          <li><a href="#!">Green Link 2</a></li>
          <li><a href="#!">Green Link 3</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
  <script>
// Pushpin Demo Init
    if ($('.pushpin-sticky').length) {
      $('.pushpin-sticky').each(function() {
        var $this = $(this);
        var $target = $('#' + $(this).attr('data-target'));
        $this.pushpin({
          top: $target.offset().top,
          bottom: $target.offset().top + $target.outerHeight() - $this.height()
        });
      });
    }
  </script>
</body>

</html>

 

Coba lihat hasilnya di browser.

Baiklah teman-teman, demikian artikel tentang cara membuat pushpin dengan materialize css kali ini, semoga bermanfaat.

17 April 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat