stickyHeader - Dính tiêu đề khi cuộn trang

Đi tới Bảng điều khiển quản trị (AdminCP) - Tùy chỉnh - Chủ đề và nhấn vào Bật công cụ thiết kế chủ đề

Sau đó, từ menu thả xuống chủ đề, chọn Thiết kế chủ đề: CSS & JS

Trong CSS, đặt:

.stickyHeader{padding-top:70px;transition:transform .8s ease;animation:ani .8s forwards;}
.stickyHeader header.ipsHeader.ipsResponsive_header--desktop {position:fixed;z-index:2000;top:0;left:0;right:0;transition:transform .8s ease;animation:ani .8s forwards;}

.stickyHeader .ipsHeader__primary {
  -webkit-backdrop-filter:blur(20px);color: inherit;backdrop-filter:blur(20px);background:rgba(255, 255, 255, .18);box-shadow:0 15px 25px rgba(0, 0, 0, .6);
}

.stickyHeader .ipsHeader__secondary {
  -webkit-backdrop-filter:blur(20px);color: inherit;backdrop-filter:blur(20px);background:rgba(255, 255, 255, .18);box-shadow:0 15px 25px rgba(0, 0, 0, .6);
}

Lưu lại.

Trong Javascript, đặt:

$(window).scroll(function() {
      //if( window.innerWidth >= 979 ){
        var height = $(window).scrollTop();
        if(height > 150){
        	$('.ipsApp').addClass('stickyHeader');
          	//$("[data-role='toTop']").removeClass('ipsHide');
        } else{
        	$('.ipsApp').removeClass('stickyHeader');
          	//$("[data-role='toTop']").addClass('ipsHide');
        }
      //}
  	});

Lưu lại.

Chúc các bạn thành công!