Thủ thuật code web ẩn hiện (show/hide) đối tượng menu, box, widget, tab... tại vị trí xác định khi scroll chuột

Thủ thuật code web sử dụng Jquery ẩn hiện ( show / hide ) hoặc  ( fadeIn / fadeOut ).

Là thủ thuật khá hữu ích giúp chúng ta hiển thị nội dung tại vị trí xác định hoặc ẩn đi khi người sử dụng cuộn chuột ( scroll ) đến vị trí xác định.

I. Thủ thuật  Ẩn hiện Show / hide  đối tượng, là menu, widget, box bài viết liên quan tại vị trí xác định 

Code sử dụng :

  • [ Điều kiện If, Else & If Else lồng nhau ] : https://freetuts.net/lenh-kiem-tra-dieu-kien-if-else-trong-javascript-267.html
  • [ Biểu thức điều kiện ] : https://viblo.asia/p/bieu-thuc-dieu-kien-trong-javascript-maGK7mABlj2
  • Script kích hoạt Jquery :  <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>  
  • Cách làm menu cố định khi Scroll chuột : https://vnxf.vn/threads/cach-lam-menu-co-dinh-khi-scroll-chuot.12620/
Thủ Thuật Blogspot   • Nơi chia sẻ : kiến thức, kinh nghiệm giúp tối ưu blogger hay nhất, mới nhất
Tham khảo :
  • Tham khảo thêm các kỹ thuật khác tương tự show / hide là fadeIn() / fadeOut() xem bài viết hướng dẫn tạo code mẫu hiển thị nút liên hệ khi cuộn chuột : https://www.huydc.net/2019/06/hien-thi-nut-lien-he-khi-scroll.html
  • Xem thêm Popup hiển thi theo thời gian 
  • Tìm hiểu thêm quảng cáo trượt giống admicro , quảng cáo ẩn hiển trên mobile giống quảng cáo trên các trang báo mạng    

Hướng dẫn code :

<!-- Code  Ẩn hiện Show / hide  đối tượng, là menu, widget, box bài viết liên quan tại vị trí xác định  -->

<nav id="fixNav">

  <!--Code hoặc nội dung cần hiển thị -->

  <center>Hiển Thị Text  </center>

  <!--End Code hoặc nội dung cần hiển thị -->   

</nav>

<!--display: block;-->

<style>

#fixNav{

  width: 100%;

  height: 35px;

  background-color: #0082bb;

  display: none;

  box-shadow: 0px 2px 2px rgba(0,0,0,0.5); /*Đổ bóng cho menu*/

  position: fixed; /*Cho menu cố định 1 vị trí với top và left*/

  top: 0; /*Nằm trên cùng*/

  left: 0; /*Nằm sát bên trái*/

  z-index: 100000; /*Hiển thị lớp trên cùng*/

}

  </style>  

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>  

<script>

jQuery(document).ready(function($) {   

  //selector đến vị trí đối tượng cần làm việc

  var TopFixMenu = $("#fixNav");

  // kiểm tra sự kiện cuộn chuột để bắt thông tin đã cuộn được chiều dài là bao nhiêu.

    $(window).scroll(function(){

    // Nếu cuộn được hơn 150px và bé hơn 500px  

        if(($(this).scrollTop()>150) && ($(this).scrollTop()<750)) 

   {

      // Tiến hành show hiện đối tượng ra   

        TopFixMenu.show();

   }

    // Nếu cuộn trên bằng hoặc hơn 750px        

     else if($(this).scrollTop()>=750)

   {

      // Thực hiện lệnh hide - ẩn đối tượng   

        TopFixMenu.hide();

   }  

      else

   {

      // Ngược lại, nhỏ hơn 150px thì cho hide - ẩn đối tượng

            TopFixMenu.hide();

    }}

    )

})  

</script>  

<!-- End Code  Ẩn hiện Show / hide  đối tượng, là menu, widget, box bài viết liên quan tại vị trí xác định  -->

II. Thủ thuật hiển thị  đối tượng Box, Khung Đăng Ký, Thông Báo, like fanpage & các nút liên hệ khi kéo chuột đến vị trí nào đó


Hướng dẫn code :

<!-- Code hiển thị Widget khi kéo chuột đến vị trí nào đó được xác định trước -->
<div class='giabao'>
<!--Noi dung code cần hiển thị -->
  <center> Text nội dung </center>
  <!--End Noi dung code cần hiển thị -->  
</div>  
  
 <style>
    .giabao {
        position: fixed;
        top: 50%;
        right: 0;
        transform: translate(-0, -50%);
        z-index: 999!important;
        display: none
    }    
</style> 
 
  <script>
    //<![CDATA[
    $(document).on('scroll', function() {
            var x = $(this).scrollTop(),
                y = $('#Label1').offset().top
            if (x > y) {
                $('.giabao').fadeIn()
            } else {
                $('.giabao').fadeOut()
            }
        })
        //]]>
</script> 
<!-- Code hiển thị Widget khi kéo chuột đến vị trí nào đó được xác định trước -->

Ghi Chú : #Label1 : Id của Widget BlogSpot cần hiển thị   

Ý tưởng :
  • Tạo bài viết liên quan hiển thị khi scroll chuột đến vị trí đầu tiên, biến mất khi vượt qua giá trị nào đó
Tìm kiếm nội dung bài viết liên quan đến sticky & scroll chuột :
  • Tạo các nút liên hệ và chỉ hiển thị khi scroll đến vị trí xác định
Web & Link tham khảo code web mở rộng  :
  • [ Hướng dẫn nhúng thư viện Jquery - trong một số trường hợp code Jquery của bạn không chạy đó là do cài thiếu thư viện ] : https://www.tranducit.com/2017/04/huong-dan-them-nhung-thu-vien-jquery.html
  • [ Code mẫu sự kiện Scroll trên w3schools.com ] https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_scroll
  • [ Hiển thị các nút liên hệ khi kéo chuột đến vị trí nào đó  ] : https://www.huydc.net/2019/06/hien-thi-nut-lien-he-khi-scroll.html
  • [ jQuery Sticky Tooltip: Cuộn chuột qua Tooltip hiển thị hình ảnh tương ứng ] : https://dotnet.edu.vn/ChuyenMuc/jQuery-Sticky-Tooltip-Cuon-chuot-qua-Tooltip-hien-thi-hinh-anh-tuong-ung-607.aspx
  • [ Bắt sự kiện cuộn chuột và xử lý hiệu ứng ] : https://nguyenvanhieu.vn/bai-tap-javascript-8
  • [ Hướng dẫn cách giữ cố định phần tử khi cuộn chuột với Sticky và Collapse cho Blogspot  ] : https://www.congnghethuthuat.net/2018/10/huong-dan-cach-giu-co-dinh-phan-tu-khi-cuon-chuot-voi-sticky-va-collapse-cho-blogspot.html
  • https://www.thietkeblogspot.com/2019/06/cach-chen-quang-cao-co-dinh-trong-bai-viet-chi-hien-thi-tren-mobile.html
  • https://www.taoanhdep.com/2016/06/bai-viet-lien-quan-ep-cho-blogspot.html
  • https://thoandroid.blogspot.com/2017/06/khung-thong-bao-hien-thi-ngoai-trang.html
  • https://www.vietmkt360.com/2014/03/chen-khung-dang-ki-theo-doi-like-box-like-facebook-ben-duoi-bai-dang.html
  • https://www.windows2it.com/2015/08/popup-hien-thi-likebox-cua-fanpage-facebook-tren-blogspot-blogger.html
  • http://code24h.com/lam-menu-an-hien-khi-scroll-bang-jquery-headroom-d23717.htm
  • https://www.giaodienblog.vn/2020/10/tao-cac-nut-lien-he-va-chi-hien-thi-khi.html
  • https://vietblogdao.com/tao-cac-nut-lien-he-va-chi-hien-thi-khi-scroll-den-vi-tri-xac-dinh
  • https://kinhbacweb.blogspot.com/2016/05/tao-bai-viet-lien-quan-goc-phai-hien.html
  • http://lambatkeoquan12.blogspot.com/2017/07/code-slide-anh-hoac-tin-tuc-chay-tu.html
  • https://www.landgonow.com/2011/01/bai-viet-lien-quan-theo-nhieu-label-cho.html

Link bài viết Breaking News Blogspot trên Blog Gia Bảo  :

✨ Bài viết được thực hiện bởi Blogger Gia Bảo, Freelancer Marketing Online, có nhiệm vụ kết nối khách cần mua với nhà phân phối, công ty sản xuất. BLOG GIA BẢO không phải đơn vị trực tiếp bán hàng trên website mà chỉ là nơi giúp bên mua gặp gỡ bên bán.

✨ Nổi bật : Mô hình Freelancer Marketing Online Cùng Nhà Phân Phối / Công Ty Sản Xuất Triển Khai Kênh Bán Hàng Trực Tuyến Thông Qua Việc Mở Gian Hàng TMĐT : Xem thêm,....

Kem chống nắng Biore UV Aqua Rich Watery Essence/Gel SPF 50+/ PA++++ 50ml/90ml

Xem Giá Bán
Xem thêm : Chăm Sóc Cơ Thể
Mua ngay

Bộ bàn ăn gỗ cao su gấp gọn

Xem Giá Bán
Tìm hiểu thêm về : Gỗ ghép
Đặt Mua ngay