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

0

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()

+ 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ệ

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

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