ayrisdev/muglasurucukursu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: optimize sticky header to prevent layout thrashing

Browse Source
This commit is contained in:
mstfyldz
2026-05-04 22:23:42 +03:00
parent ae2153d744
commit 2d5a7f4048
1 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
js/function.js
View File

@@ -11,20 +11,30 @@
/* Sticky Header */
if($('.active-sticky-header').length){
$window.on('resize', function(){
var $headerSticky = $('header .header-sticky');
var $headerMain = $("header.main-header");
var cachedHeight = 0;
function setHeaderHeight(){
cachedHeight = $headerSticky.outerHeight();
$headerMain.css("height", cachedHeight);
}
$window.on('load resize', function(){
setHeaderHeight();
});
function setHeaderHeight(){
$("header.main-header").css("height", $('header .header-sticky').outerHeight());
}
var ticking = false;
$window.on("scroll", function() {
var fromTop = $(window).scrollTop();
setHeaderHeight();
var headerHeight = $('header .header-sticky').outerHeight()
$("header .header-sticky").toggleClass("hide", (fromTop > headerHeight + 100));
$("header .header-sticky").toggleClass("active", (fromTop > 600));
if (!ticking) {
window.requestAnimationFrame(function() {
var fromTop = $window.scrollTop();
$headerSticky.toggleClass("hide", (fromTop > cachedHeight + 100));
$headerSticky.toggleClass("active", (fromTop > 600));
ticking = false;
});
ticking = true;
}
});
}