Dalam tutorial ini, kita akan menggunakan ScrollMagic.js, library JavaScript yang sangat populer, untuk membuat sidebar yang sticky di halaman scroll. Dalam tiga langkah (HTML, CSS, dan JavaScript), kita akan jabarkan keseluruhan proses.

Inilah yang akan kita buat (lihat versi fullscreen untuk merasakan magic penuhnya dan beri beberapa ♥):

Sidebar hanya akan disematkan ketika jendela browser setidaknya 768px lebar dan mencapai tepi atas viewport. Layar yang lebih kecil mengalami tata letak yang ditumpuk sebagai gantinya.

Apa itu ScrollMagic.js?

Untuk deskripsi terbaik ScrollMagic, kita akan menuju ke halaman Github:

"library javascript untuk interaksi scroll magis."

Dibuat oleh Jan Paepke, dapat dikombinasikan secara efektif dengan Greensock Animation Platform (GSAP) untuk membuat animasi JavaScript yang kompleks dan menarik. Untuk lebih memahami kemampuan ScrollMagic, lihat daftar contoh ini dan lihat tutorial dan kursus ini di Tuts+.

• 
  Animation
  Cara Menghidupkan Minum Kopi Sprite Dengan ScrollMagic
  Dennis Gaebel
• 
  JavaScript
  Memperkenalkan ScrollMagic 2.0
  Dennis Gaebel
• 
  Animasi
  Memulai Dengan ScrollMagic
  Craig Campbell

Mulai dengan ScrollMagic.js

Untuk memulai dengan ScrollMagic, Anda harus terlebih dahulu memasukkannya ke dalam proyek Anda. Anda dapat mengunduhnya dengan mengunjungi repo GitHub-nya, dengan menggunakan pengelola paket (mis. npm), atau dengan memuat aset yang diperlukan melalui CDN (mis. cdnjs).

Untuk demo kita, kita akan memilih opsi terakhir. Dengan memperhatikan hal itu, jika Anda melihat di bawah tab Settings pada pena demo kita, Anda akan melihat bahwa saya telah menyertakan satu file JavaScript eksternal:

Saya juga memasukkan Babel untuk menyusun kode ES6 ke ES5.

1. HTML

HTML kita terdiri dari dua bagian helper dan sebuah post. Post tersebut berisi dua sub-bagian: detail post dan sidebar post. Dalam skenario nyata, konten post dapat sesuai dengan post blog, kamar hotel, atau program sekolah.

Berikut markupnya:

1

<section class="section">

2

  <!-- content here -->

3

</section>

4

5

<article class="post">

6

  <div class="container">

7

    <div class="post-content">

8

      <div class="post-details">

9

        <!-- content here -->

10

      </div>

11

      <aside class="post-sidebar">

12

        <div class="post-sidebar-inner">

13

          <!-- content here -->

14

        </div>

15

      </aside>

16

    </div>

17

  </div>

18

</article>

19

20

<section class="section section-bottom">

21

  <!-- content here -->

22

</section>

2. CSS

Kita tidak akan menentukan gaya khusus apa pun untuk contoh kita. Menariknya, kita menggunakan CSS grid untuk menata konten entri pada layar medium dan lebih tinggi (≤768px).

Inilah bagian dari CSS:

1

.section {

2

  display: flex;

3

  align-items: center;

4

  justify-content: center;

5

  height: 100vh;

6

  background: #ee3f3f;

7

  color: white;

8

  text-align: center;

9

}

10

11

.container {

12

  max-width: 1000px;

13

  margin: 0 auto;

14

}

15

16

@media screen and (min-width: 768px) {

17

  .post-content {

18

    display: grid;

19

    grid-gap: 20px;

20

    grid-template-columns: 70% 30%;

21

  }

22

}

• 

  Layout Grid CSS: Panduan Mulai Cepat

  Cara kita mendekati tata letak di web berubah, dan di garis depan perubahan itu adalah CSS Grid Layout. Panduan mulai cepat yang diperbarui ini akan skip detail ...

3. JavaScript

Dengan HTML dan CSS di tempat, kita siap memeriksa kode JavaScript yang bertanggung jawab untuk mengaktifkan ScrollMagic.

Perlu diingat bahwa cara terbaik untuk memahami cara kerja plugin ini adalah membaca dokumentasinya. Sumber informasi lain yang berguna adalah cheat sheet ScrollMagic yang dibuat oleh Petr Tichy.

Berikut kode JavaScript kita:

1

const postDetails = document.querySelector(".post-details");

2

const postSidebar = document.querySelector(".post-sidebar");

3

const postSidebarContent = document.querySelector(".post-sidebar > div");

4

5

//1

6

const controller = new ScrollMagic.Controller(); 

7

8

//2

9

const scene = new ScrollMagic.Scene({

10

  triggerElement: postSidebar,

11

  triggerHook: 0,

12

  duration: getDuration

13

}).addTo(controller);

14

15

//3

16

if (window.matchMedia("(min-width: 768px)").matches) {

17

  scene.setPin(postSidebar, {pushFollowers: false});

18

}

19

20

//4

21

window.addEventListener("resize", () => {

22

  if (window.matchMedia("(min-width: 768px)").matches) {

23

    scene.setPin(postSidebar, {pushFollowers: false});

24

  } else {

25

    scene.removePin(postSidebar, true);

26

  }

27

});

28

29

function getDuration() {

30

  return postDetails.offsetHeight - postSidebarContent.offsetHeight;

31

}

Mari jelaskan secara singkat tindakan yang diperlukan:

1. Kita mulai dengan membuat controller.
2. Selanjutnya, kita membuat adegan dengan opsi khusus dan menambahkannya ke controller.
3. Jika lebar jendela setidaknya 768px dan sidebar mencapai tepi atas area pandang, kita pasangkan untuk durasi yang ditentukan dalam adegan. Dalam kasus kita, durasi yang diinginkan dihitung dengan mengurangi tinggi detail postingan dari tinggi konten sidebar.
4. Saat jendela dirubah ukurannya, kita memeriksa lebarnya. Jika lebih kecil dari 768px, sidebar tetap menjadi bagian dari flow dokumen normal, jika tidak maka akan menjadi sticky.

4. Browser Support

Plugin itu sendiri memiliki browser support yang luar biasa. Di luar support plugin, demo kita menggunakan CSS Grid, sehingga hanya akan berfungsi di browser yang support metode tata letak ini.

Kesimpulan

Dalam tutorial ini, kita berhasil membuat sidebar yang menjadi sticky saat kita menggulir laman ke bawah. Implementasi dasar kita bukanlah hal yang paling kuat yang dapat Anda bangun dengan library luar biasa ini, tetapi semoga cukup bermanfaat untuk memanfaatkannya dalam proyek yang akan datang.

Terakhir, jika Anda memahami pendekatan ScrollMagic lain yang lebih efektif untuk membuat demo kita, beri tahu kita di komentar di bawah.