Bài 15: Bắt sự kiện cuộn trang với jQuery

1 3.284

Trong bài này, mình sẽ hướng dẫn các bạn bắt sự kiện cuộn trang với jQuery. Chúng ta sẽ tạo hiệu ứng khi cuộn trang đến đâu, các thành phần của website sẽ biến đổi theo.

Video – Bắt sự kiện cuộn trang với jQuery

Ý tưởng

Chúng ta sẽ làm ví dụ demo, khi cuộn trang, thanh menu sẽ cố định ở vị trí trên cùng chứ không cuộn theo. Và nút cuộn nhanh về đầu trang chỉ xuất hiện khi chúng ta cuộn gần nửa cuối website.

+ Bắt sự kiện cuộn trang bằng hàm $(window).scroll() và lấy vị trí của thẻ body bằng hàm scrollTop()

"Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo"

Hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

+ Khi vị trí của thẻ body đặt điều kiện nào đó, chúng ta sẽ addClass() cho menu và nút quay về đầu trang.

Hướng dẫn thực hiện

Mình chỉ hướng dẫn các ẩn và hiện thanh menu và nút quay về đầu trang. Hiệu ứng quay về đầu trang các bạn tự code hoặc tham khảo code mẫu nhé.

Phần HTML

Mình sẽ dùng font awesome để dùng các icon nhé.

<nav class="menu">
   <ul >
      <li>Trang chủ</li>
      <li>Giới thiệu</li>
      <li>Tuyển dụng</li>
   </ul>
</nav>
<div class="content">
   <img src="img/1.jpg">
   <img src="img/1.png">
   <img src="img/3.jpg">
</div>
<div class="back-to-top"><i class="fas fa-chevron-up"></i></div>

Phần CSS

nav.menu{
   width: 100%;
   background: #ffffff;
}
nav.menu ul{
   width: 1200px;
   margin: auto;
   display: flex;
   justify-content: space-around;
}
nav.menu ul li {
   padding: 10px 12px;
   font-size: 20px;
   list-style: none;
   margin: 0px 20px;
   cursor: pointer;
}
.co-dinh-menu{
   position: fixed;
   top: 0px;
   left: 0px;
   z-index: 1000;
   box-shadow: 2px 5px 5px rgb(0,0,0,0.35);
}
.content{
   width: 1200px;
   margin: auto;
}
.content img{
   width: 100%;
   margin: 40px 0px;
}
.back-to-top {
   width: 50px;
   height: 50px;
   background: rgb(0,0,0,0.7);
   font-size: 35px;
   color: whitesmoke;
   text-align: center;
   vertical-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
   position: fixed;
   left: 50%;
   bottom: 20px;
   margin-left: -25px;
   cursor: pointer;
   visibility: hidden;
   opacity: 0;
}
.back-to-top.hien-ra{
   visibility: visible;
   opacity: 1;
}

Phần JS

$(document).ready(function() {
   $(window).scroll(function(event) {
      var pos_body = $('html,body').scrollTop();
      // console.log(pos_body);
      if(pos_body>20){
         $('.menu').addClass('co-dinh-menu');
      }
      else {
         $('.menu').removeClass('co-dinh-menu');
      }
      if(pos_body>1200){
         $('.back-to-top').addClass('hien-ra');
      }
      else{
         $('.back-to-top').removeClass('hien-ra');
      }
   });
   $('.back-to-top').click(function(event) {
      $('html,body').animate({scrollTop: 0},1400);
   });
});

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên hệ

Bạn cũng có thể thích
  1. sơn nói

    hình như máy tính của e nó k nhận hàm scrollTop() ạ..e k làm thế nào để quận trang được ạ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.