Sử dụng sự kiện scrollTop để cố định thanh menus

11/12/2016 10:08 18122

Table of Contents

Chúng ta sẽ sử dụng sự kiện scroll và scrollTop của jquery và một chút css để làm việc này:

Mã css:

.menus-scroll {
    position: fixed;
    top: 0;
	left: 0;
	max-width:100% !important;
box-shadow: 1px 1px 10px rgb(0 0 0 / 15%);
    -webkit-animation: stuckMoveDown .6s;
    animation: stuckMoveDown .6s;
	
}
@-webkit-keyframes stuckMoveDown {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes stuckMoveDown {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.menus-scroll {

position: fixed;

top: 0;

left: 0;

max-width:100% !important;

box-shadow: 1px 1px 10px rgb(0 0 0 / 15%);

-webkit-animation: stuckMoveDown .6s;

animation: stuckMoveDown .6s;

}

@-webkit-keyframes stuckMoveDown {

0% {

-webkit-transform: translateY(-100%);

transform: translateY(-100%)

}

100% {

-webkit-transform: translateY(0);

transform: translateY(0)

}

@keyframes stuckMoveDown {

0% {

-webkit-transform: translateY(-100%);

transform: translateY(-100%)

}

100% {

-webkit-transform: translateY(0);

transform: translateY(0)

}

Mã jquery:

$(window).scroll(function(){
		var wide = $(window).width();
		 var start = 200;
			 if($(this).scrollTop()>=start){
				 $('.menutop12v2-wrapper').addClass('menus-scroll');
			 }
			 if($(this).scrollTop()<start){
				 $('.menutop12v2-wrapper').removeClass('menus-scroll');
			 }
	 });

$(window).scroll(function(){

var wide = $(window).width();

var start = 200;

if($(this).scrollTop()>=start){

$('.menutop12v2-wrapper').addClass('menus-scroll');

}

if($(this).scrollTop()<start){

$('.menutop12v2-wrapper').removeClass('menus-scroll');

}

});

4.9/5 (16 Đánh giá)

Các bài viết khác có thể hữu ích với bạn

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Disable animation trong revolution slider [ 20/09/2022 08:07 ]
Cách tạo button printer một element bằng javascript [ 19/09/2022 12:56 ]
Code sử dụng vue js, quasar, axios, sweetalert2 trong tác vụ quản lý danh sách [ 19/07/2022 10:26 ]
Hướng dẫn lấy botToken và chatId của bot telegram [ 13/06/2022 13:54 ]
Tạo thanh bar bottom mobile trong theme wordpress [ 07/06/2022 10:00 ]
Fix acf not save iframe [ 23/04/2022 07:44 ]
Rewrite lại url cho page template wordpress [ 21/04/2022 02:11 ]
Tối ưu hóa cron trong wordpress để website chạy nhanh hơn [ 09/04/2022 03:30 ]
Function tạo rating star sử dụng dashicon từ wordpress [ 03/04/2022 03:02 ]
Thêm editor cho mô tả category wordpress (add editor description for category wordpress) [ 01/04/2022 02:02 ]

Sử dụng sự kiện scrollTop để cố định thanh menus

Mã css:

Mã jquery:

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)