Làm sticky sidebar đơn giản (simple sticky sidebar)

05/07/2019 09:23 9343

Để sticky một element nào đó thì có nhiều plugin jquery làm việc này, nhưng anh chị không thích phải include thư viện plugin jquery thì tham khảo cách làm của tôi dưới đây nhé:

1.Mã jquery

<script>
jQuery(function($){
	$(window).scroll(function(){
		//phần tử trên nó .d-contact
		var element_above=$('.d-contact');
		//Phần tử mà anh chị muốn kết thúc sticky, thường là chân trang footer
		var element_footer=$('.bottom');
		//phần tử chứa nội dung, nếu chưa có nội dung hoặc nội dung chưa đủ nhiều thì sẽ không sticky
		var check_height = $('.check_height').height();
		var width=element_above.width();
		var startPoint = element_above.offset().top + element_above.height() + 50;
		var endPoint=element_footer.height();
                var element_sticky = $('.item.support-book-tour');
		//Chỉ thực hiện ở desktop
		if( $(window).width() > 768){
			if(check_height > startPoint){
				if($(this).scrollTop()>=startPoint){
					element_sticky.addClass('last_posts_sticky');
					element_sticky.attr("style","width:"+width+"px");
				}
				if($(this).scrollTop() < startPoint){ element_sticky.removeClass('last_posts_sticky'); } if ((window.innerHeight + window.scrollY + endPoint ) >= document.body.scrollHeight) {
					element_sticky.removeClass('last_posts_sticky');
				}
			}
		}
	});
});
</script>

jQuery(function($){

$(window).scroll(function(){

//phần tử trên nó .d-contact

var element_above=$('.d-contact');

//Phần tử mà anh chị muốn kết thúc sticky, thường là chân trang footer

var element_footer=$('.bottom');

//phần tử chứa nội dung, nếu chưa có nội dung hoặc nội dung chưa đủ nhiều thì sẽ không sticky

var check_height = $('.check_height').height();

var width=element_above.width();

var startPoint = element_above.offset().top + element_above.height() + 50;

var endPoint=element_footer.height();

var element_sticky = $('.item.support-book-tour');

//Chỉ thực hiện ở desktop

if( $(window).width() > 768){

if(check_height > startPoint){

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

element_sticky.addClass('last_posts_sticky');

element_sticky.attr("style","width:"+width+"px");

}

if($(this).scrollTop() < startPoint){ element_sticky.removeClass('last_posts_sticky'); } if ((window.innerHeight + window.scrollY + endPoint ) >= document.body.scrollHeight) {

element_sticky.removeClass('last_posts_sticky');

}

});

</script>

2.Mã css

.last_posts_sticky{
	position: fixed;
    z-index: 999999999;
    top: 93px;
}

.last_posts_sticky{

position: fixed;

z-index: 999999999;

top: 93px;

}

Anh chị chỉnh startPoint, endPoint và top trong mã css phù hợp với hoàn cảnh của anh chị nhé

4.8/5 (16 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

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

Cách dùng Local Storage để lưu trữ dữ liệu ít quan trong [ 09/11/2022 01:39 ]
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 ]

Làm sticky sidebar đơn giản (simple sticky sidebar)

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)