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/
- 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 đó
- 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ạo các nút liên hệ và chỉ hiển thị khi scroll đến vị trí xác định
- [ 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
