Trong bài hướng dẫn này, chúng ta sẽ sử dụng ScrollMagic.js, một thư viện JavaScript cực kỳ nổi tiếng, để xây dựng một thanh sticky sidebar khi cuộn trang. Trong ba bước (HTML, CSS và JavaScript), chúng ta sẽ phác thảo toàn bộ quá trình.

Dưới đây là những gì chúng ta sẽ tạo ra (hãy xem phiên bản toàn màn hình để trải nghiệm toàn bộ ma thuật của nó và cho nó một ít ♥):

See the Pen How to Build a Sticky Sidebar on Page Scroll With ScrollMagic.js by Envato Tuts+ (@tutsplus) on CodePen.

Thanh sidebar sẽ chỉ được ghim khi cửa sổ trình duyệt có chiều rộng tối thiểu 768px và nó chạm cạnh trên cùng của viewport. Thay vào đó màn hình nhỏ hơn sẽ trải nghiệm bố cục xếp chồng.

Để mô tả đầy đủ về ScrollMagic, chúng ta sẽ đi đến trang Github của nó:

“Thư viện javascript dành cho các tương tác cuộn đầy ma thuật.”

Được tạo ra bởi Jan Paepke, nó có thể được kết hợp hiệu quả với Greensock Animation Platform (GSAP)để xây dựng các hiệu ứng JavaScript phức tạp và hấp dẫn.

Để bắt đầu với ScrollMagic, trước tiên bạn phải thêm nó vào dự án của mình. Bạn có thể tải về bằng cách truy cập repo GitHub của nó bằng cách sử dụng trình quản lý gói (ví dụ, npm) hoặc bằng cách tải các nội dung cần thiết thông qua CDN (ví dụ, cdnjs).

Đối với demo của chúng ta, chúng ta sẽ chọn tùy chọn thứ hai. Với điều đó, nếu bạn nhìn vào tab Settings của pen demo, bạn sẽ thấy rằng tôi đã bao gồm một tập tin JavaScript bên ngoài:

Tôi cũng kết hợp Babel để biên dịch mã ES6 xuống ES5.

HTML của chúng ta bao gồm hai phần trợ giúp và một bài viết. Bài viết chứa hai phần con: chi tiết của bài viết và thanh sidebar. Trong thực tế, nội dung của bài viết có thể tương ứng với bài viết trên blog, phòng khách sạn hoặc chương trình học.

Dưới đây là mã html:

Chúng ta sẽ không định nghĩa bất kỳ style đặc biệt nào cho ví dụ của chúng ta. Điều thú vị là chúng ta sử dụng CSS grid để tạo bố cục nội dung của bài viết trên màn hình kích thước trung bình và lớn hơn (≤768px).

Đây là một phần CSS:

Sau khi xong HTML và CSS, chúng ta đã sẵn sàng đi vào code JavaScript chịu trách nhiệm kích hoạt ScrollMagic.

Lưu ý rằng cách tốt nhất để hiểu plugin này hoạt động như thế nào là đọc tài liệu hướng dẫn của nó. Một nguồn thông tin hữu ích khác là cheat sheet của ScrollMagic do Petr Tichy tạo ra.

Đây là code JavaScript của chúng ta:

Hãy mô tả ngắn gọn các hành động cần thiết:

  1. Chúng ta bắt đầu bằng cách tạo một controller.
  2. Tiếp theo, chúng ta tạo một scene với các tùy chọn tùy biến và thêm nó vào controller.
  3. Nếu chiều rộng của window ít nhất là 768px và sidebar chạm đến cạnh trên cùng của viewport, chúng ta sẽ ghim nó trong khoảng thời gian được xác định trong scene. Trong trường hợp của chúng ta, thời lượng mong muốn được tính bằng cách trừ chiều cao của chi tiết bài viết khỏi độ cao nội dung của side.
  4. Khi window thay đổi kích thước, chúng ta kiểm tra chiều rộng của window. Nếu nó hẹp hơn 768px, sidebar vẫn là một phần của dòng tài liệu bình thường, nếu không nó sẽ trở nên sticky.

Bản thân plugin có trình duyệt hỗ trợ rất tốt. Ngoài hỗ trợ của plugin, bản demo của chúng ta sử dụng CSS Grid, vì vậy nó sẽ chỉ hoạt động trong các trình duyệt hỗ trợ phương pháp bố cục này.

Trong bài hướng dẫn này, chúng ta đã xoay sở để xây dựng một sidebar trở nên sticky khi chúng ta cuộn trang xuống. Cài đặt cơ bản của chúng ta không phải là thứ mạnh mẽ nhất mà bạn có thể xây dựng với thư viện tuyệt vời này, nhưng hy vọng đủ hữu ích để tận dụng nó trong một dự án sắp tới.

Cuối cùng, nếu bạn biết bất kỳ phương pháp tiếp cận ScrollMagic nào hiệu quả hơn để xây dựng bản demo của chúng ta, hãy cho chúng tôi biết trong phần bình luận bên dưới nhé.