בכדי ליצור הדר שמופיע אחרי X פיקסלים בגלילה ונעלם נעשה את הצעדים הבאים:
1. ניצור קונטיינר חדש ונגדיר לו מצב סטיקי עליון יחד עם קיזוז אפקט של 100
2. בקונטיינר שיצרנו נגדיר קלאס ו ID, למשל scrolling-header
3. בעזרת תוסף כמו Code Snippets נדביק את הקוד הבא שבו נשנה מספר דברים:
** אם רשמנו קלאס ו- ID שונים אז נשנה את scrolling-header בשורה 10+12 בקוד בהתאם למה שהזנו.
** אם הגדרנו אפקט קיזוז גדול יותר מ- 100 אז נשנה את זה גם כאן בקוד (בשורה מספר 12)
לינק למדריך של אימרן על זה: https://youtu.be/Ll0eAeViAU8?si=JBA7_5-6nvwdc6BZ
בכדי ליצור הדר שמופיע אחרי X פיקסלים בגלילה ונעלם נעשה את הצעדים הבאים:
1. ניצור קונטיינר חדש ונגדיר לו מצב סטיקי עליון יחד עם קיזוז אפקט של 100
add_action('wp_footer', 'custom_hide_header_script');
function custom_hide_header_script() {
?>
<script type="text/javascript">
(function() {
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("scrolling-header").style.top = "0";
} else {
document.getElementById("scrolling-header").style.top = "-100px";
}
prevScrollpos = currentScrollPos;
};
})();
</script>
<?php
}
כדי לשפר את הופעת האפקט הצגה של הקונטיינר נוסיף את קוד ה- CSS לקונטיינר
CSS Code for Transition:
.scrolling-header {
transition: all .5s ease!important;
}