Code cố định một Widget(Stick Widget) tự động trượt

Để tạo một hiệu ứng thanh trượt cố định ở cột bên các bạn có thể tham khảo bài viết sau đây Code cố định một Widget(Stick Widget) tự động trượt khi lăn chuột.

Sticky Sidebar là một JavaScript thuần túy để tạo thanh trượt tiện dụng thông minh, hoạt động với thanh bên nếu nó cao hơn hoặc ngắn hơn khung nhìn, tích hợp với cảm biến thay đổi kích thước để tự tính lại kích thước một cách tự động khi kích thước của thanh bên hoặc container đã thay đổi, hỗ trợ jQuery / Zepto và tương thích với Firefox, Chrome, Safari và IE9 +.

Code cố định một Widget(Stick Widget) tự động trượt khi lăn chuột

Mọi thứ cần để thực hiện

khai báo thư viện ./js/sticky-sidebar.js

Khai báo đoạn: <script type=”text/javascript” src=”./js/sticky-sidebar.js”></script>
Đoạn này có thể để ở file: header.php hoặc footer.php có nhiều sự lựa chọn.

Đoạn Script hiển thị:

<script type="text/javascript"> var sidebar = new StickySidebar('#sidebar', {
containerSelector: '#main-content',
innerWrapperSelector: '.sidebar__inner',
topSpacing: 20, bottomSpacing: 20 });
</script>

containerSelector: '#main-content',

innerWrapperSelector: '.sidebar__inner',

topSpacing: 20, bottomSpacing: 20 });

</script>

topSpacing: 20 (tính bằng px) – khoảng cách trên cùng giữa mục Sticker và Header.
bottomSpacing: 20 (tính bằng px) – khoảng cách dưới cùng giữa mục Sticker và Footer.

Tiến hàng thực hiện

Cấu trúc HTML của trang web của bạn phải tương tự như vậy để hoạt động:

<div id="main-content" class="main">
<div id="sidebar" class="sidebar">
<div class="sidebar__inner">
<p>Content goes here</p>
</div>
</div>
<div id="content" class="content">
<p>Content goes here</p>
</div>
</div>

<p>Content goes here</p>

</div>

<p>Content goes here</p>

</div>

=> các bạn có thể thay đổi các tên các class tùy theo website của bạn đang sử dụng.

Lưu ý: Lớp sidebar__inner là class bạn muốn cố định, #main-content là lớp bao bên ngoài cùng.

Ví dụ trên, bạn có thể sử dụng JavaScript sau:

<script type="text/javascript" src="./js/sticky-sidebar.js"></script>
<script type="text/javascript">
var sidebar = new StickySidebar('#sidebar', {
containerSelector: '#main-content',
innerWrapperSelector: '.sidebar__inner',
topSpacing: 20,
bottomSpacing: 20
});
</script>

var sidebar = new StickySidebar('#sidebar', {

containerSelector: '#main-content',

innerWrapperSelector: '.sidebar__inner',

topSpacing: 20,

bottomSpacing: 20

});

</script>

Kết luận

Qua bài viết này bạn đã có thể tự tạo được thanh nội dung trượt xuống dưới hoặc chạy lên trên tùy theo vị trí kéo chuột của thanh Scroll Bar ⬆⬇ trên trình duyệt web.

Bạn có thể áp dụng để tạo các banner quảng cáo, tạo thanh chia sẻ bài viết luôn hiển thị trên màn hình hoặc tạo một thanh menu với công dụng tương tự như vậy, việc này sẽ rất có ích cho blog hoặc trang web của bạn nếu như bạn muốn khách truy cập luôn nhìn thấy thông tin quan trọng mà bạn muốn gửi đến họ.

Theo : https://chowebs.com/