Thanks for this! I made some small changes to the js. 1) Using the Math.max function to make it work on Safari when scrolled back to the top. 2) Getting the site-header height in case you have a smaller header on mobile 3) Removing handling the class "hidden". It does nothing right? // Sticky header document.addEventListener("DOMContentLoaded", function () { var prevScrollPos = Math.max(0, window.scrollY); var header = document.getElementById("site-header"); window.onscroll = function () { var currentScrollPos = Math.max(0, window.scrollY); if (prevScrollPos >= currentScrollPos) { header.style.top = "0"; } else { header.style.top = "-" + header.clientHeight + "px"; } prevScrollPos = currentScrollPos; }; });
And thanks for this @nexuz6 ! Love it when folk get involved, take an idea and make it better 🙏 Will pin this comment to that others see and will update the code on the freebies download! thanks again! 🤩
OMG I’ve been looking for an elegant way of doing this in FSE for 6 weeks now (I’m new to FSE). I can’t wait to try your method. Thank you! You and Adam Lowe do the best WP videos. Idea for your next video: shrink logo/header height/header background color or opacity on scroll.
Hi jakson, how can i edit my child theme with vs code? i cant figure it out and you dont explain it in any of your videos? any other videos you can recomend? i hope for a quick reply :) thanks!
Hey Scott - this is a very good point and a video I've been planning to make - will bump it up the schedule! In the mean time here's the short (and not very helpful!) version: 1. if you're developing locally, you can can use the "Open Folder" option in the VS Menu 2. if you're connecting to a server, I use this extension marketplace.visualstudio.com/items?itemName=inu1255.easy-sftp - though its a pain to set up which is why I need to make the video! I'll get back to you here when that video is live! Cheers! Jakson
@@wpjakson thanks, allso, no headers will show. i started with a blank theme. and i think it is because of the php. for now, ill just create a clone of the 2024 theme, and add a functions.php and a .js file. maby that will solve my issue
Thanks a lot for making this video! Very helpful :) I encountered the same problem where the admin bar is blocking the header. When it's disabled, it's all good. I'm facing an issue where the top margin is not applied in the mobile view causing the hero images on pages to be blocked by the header. Would you have any suggestions on how to fix this?
@@wpjakson How do I fix the admin bar issue, please. Thanks in advance. *Edit*: found this solution that worked for me: body.admin-bar #site-header { margin-top: 32px } # F r e e P a l e s t i n e
Hello Jakson, thanks for this tutorial. As always, great job. I encountered one problem and despite my best efforts, I cannot understand its cause: The header on my website is 120px high. I adjusted this value in style.css and js file (in the places you indicated in the comments), but for some reason the header displayed on the page is cut off by about 20px from the top. Update: The problem turned out to be trivial - the admin bar covers the upper part of the header. When admin bar is disabled everything is ok. :) Unfortunately, a second problem appeared: I worked on changing header behavior in a local environment. Wanting to transfer the changes to the live site, I did Export site to the file (using All-in-One Migration plugin) and then Import it to the hosting server. The site works ok, but the new header effect does not appear. The style.css and js files loaded on the hosting server correctly, so I don't know what the problem is. Do you have any ideas what I could have done wrong? All the best, Kacper
And you don't need the .style in the js file since you have the CSS defined for .hidden: document.addEventListener('DOMContentLoaded', function () { let prevScrollPos = window.scrollY; const header = document.getElementById('sticky-header'); window.addEventListener('scroll', e => { let currentScrollPos = window.scrollY; if (prevScrollPos > currentScrollPos) { header.classList.remove('hidden'); } else { header.classList.add('hidden'); } prevScrollPos = currentScrollPos; }); });
![KSI - Dirty [Official Visualiser]](http://i.ytimg.com/vi/VoDh1h1dPUE/mqdefault.jpg)
Thanks for this!
I made some small changes to the js.
1) Using the Math.max function to make it work on Safari when scrolled back to the top.
2) Getting the site-header height in case you have a smaller header on mobile
3) Removing handling the class "hidden". It does nothing right?
// Sticky header
document.addEventListener("DOMContentLoaded", function () {
var prevScrollPos = Math.max(0, window.scrollY);
var header = document.getElementById("site-header");
window.onscroll = function () {
var currentScrollPos = Math.max(0, window.scrollY);
if (prevScrollPos >= currentScrollPos) {
header.style.top = "0";
} else {
header.style.top = "-" + header.clientHeight + "px";
}
prevScrollPos = currentScrollPos;
};
});
And thanks for this @nexuz6 ! Love it when folk get involved, take an idea and make it better 🙏 Will pin this comment to that others see and will update the code on the freebies download! thanks again! 🤩
awesome!
Awesome. Thanks for this!
OMG I’ve been looking for an elegant way of doing this in FSE for 6 weeks now (I’m new to FSE). I can’t wait to try your method. Thank you! You and Adam Lowe do the best WP videos.
Idea for your next video: shrink logo/header height/header background color or opacity on scroll.
Thanks @petesangimino ! And thats a great idea for a video - have added it to the list!
yep .. that was exactly what I was lookin for .. thankts a lot!!
You're so welcome Mr Pip!
VERY handy tutorial Jakson thanks a lot!
Glad it was helpful Bruno!
Hi jakson, how can i edit my child theme with vs code? i cant figure it out and you dont explain it in any of your videos? any other videos you can recomend? i hope for a quick reply :) thanks!
Hey Scott - this is a very good point and a video I've been planning to make - will bump it up the schedule!
In the mean time here's the short (and not very helpful!) version:
1. if you're developing locally, you can can use the "Open Folder" option in the VS Menu
2. if you're connecting to a server, I use this extension marketplace.visualstudio.com/items?itemName=inu1255.easy-sftp - though its a pain to set up which is why I need to make the video!
I'll get back to you here when that video is live! Cheers! Jakson
@@wpjakson thanks, allso, no headers will show. i started with a blank theme. and i think it is because of the php. for now, ill just create a clone of the 2024 theme, and add a functions.php and a .js file. maby that will solve my issue
@@ScottSørli yes, try that - and check this plugin for cloning and/or creating themes: wordpress.org/plugins/create-block-theme/
Thanks a lot for making this video! Very helpful :)
I encountered the same problem where the admin bar is blocking the header. When it's disabled, it's all good.
I'm facing an issue where the top margin is not applied in the mobile view causing the hero images on pages to be blocked by the header. Would you have any suggestions on how to fix this?
Sorry I missed this @sipsu145 - have a look at @nexuz6 comment pinned above - poss that will help?
I had to use !important to change the background color for the header, and the admin bar is blocking the header
👍
@@wpjakson How do I fix the admin bar issue, please. Thanks in advance. *Edit*: found this solution that worked for me: body.admin-bar #site-header {
margin-top: 32px }
# F r e e P a l e s t i n e
Hello Jakson,
thanks for this tutorial. As always, great job.
I encountered one problem and despite my best efforts, I cannot understand its cause:
The header on my website is 120px high. I adjusted this value in style.css and js file (in the places you indicated in the comments), but for some reason the header displayed on the page is cut off by about 20px from the top.
Update:
The problem turned out to be trivial - the admin bar covers the upper part of the header. When admin bar is disabled everything is ok. :)
Unfortunately, a second problem appeared:
I worked on changing header behavior in a local environment. Wanting to transfer the changes to the live site, I did Export site to the file (using All-in-One Migration plugin) and then Import it to the hosting server. The site works ok, but the new header effect does not appear.
The style.css and js files loaded on the hosting server correctly, so I don't know what the problem is. Do you have any ideas what I could have done wrong?
All the best, Kacper
You're welcome Kacper :)
Send me over the link for your site and I'll take a look - you can get my email here: jakson.co/subscribe/
@@wpjakson Thank you, I sent the link by email.
And you don't need the .style in the js file since you have the CSS defined for .hidden:
document.addEventListener('DOMContentLoaded', function () {
let prevScrollPos = window.scrollY;
const header = document.getElementById('sticky-header');
window.addEventListener('scroll', e => {
let currentScrollPos = window.scrollY;
if (prevScrollPos > currentScrollPos) {
header.classList.remove('hidden');
} else {
header.classList.add('hidden');
}
prevScrollPos = currentScrollPos;
});
});
👍
thanks you made my day!
And you made my day with your comment Tommy! thanks for watching !