בלוג

במדריך זה אסביר בקצרה איך לבנות הידר דביק לאתר שלכם, ואיך לעשות אותו דביק, ולשנות אותו בזמן הגלילה ,

המדריך מודגם על תבנית Ocean-WP אבל אפשרי ליישום על כל תבנית אחרת , אם משנים את הסלקטורים ב css למה שרלוונטי לאותה תבנית.

המדריך מתאים בעיקר למי שבונה  באלמנטור , אבל ניתן לבצע את הרעיון על הידרים מוכנים מתבניות

אז נתחיל,

1. יוצרים header ומעצבים אותו כראות עינכם באלמנטור –

אם אתם רוצים הידר סטנדרטי של תפריט ולוגו , פשוט תצרו אזור ,   בפריסה של 2 עמודות – אחת ללוגו ואחת לתפריט.

בהידר סטנדרטי – העמודה של הלוגו היא כ 25% , והתפריט 75%

2. מוסיפים גודל ל body באמצעות css:

body{

min-height:800px;

}

3.  נשתמש ב css כדי לגרום לכך שההידר יהיה דביק

.ehf-header header {

   z-index: 30;

    position: fixed;

    width: 100%;

    top: 0;

}

זהו ! מזל טוב , יש לכם הידר דביק.

ברוב המקרים רק תצטרכו להוסיף ל body  גם margin-top- בהתאם לגובה התפריט הדביק( מכיוון שהשתמשנו ב position:fixed שזה אלמנט צף, נרצה  שהתפריט לא יכסה את ה body של האתר, לכן נרצה להוריד אותו ללמטה בהתאם לגובה התפריט.)

המשך המדריך רלוונטי במידה ואתם מעוניינים לבצע שינויים בהידר לאחר הגלילה (למשל שיהיה קטן יותר, יחליף צבע רקע ועוד)

 4. ניצור class שבו יהיו השינויים שנרצה שיקרו לאחר הגלילה

.

1. יוצרים header ומעצבים אותו כראות עינכם באלמנטור

2. מוסיפים גודל ל body:
body{
min-height:800px;
}
3. מוסיפים את הקוד הזה בשביל שההידר יהיה דביק: (רלוונטי לתבנית OceanWP, בתבניות אחרות תצטרכו לשנות את שם הקלאס/תגית)

.ehf-header header {
z-index: 30;
position: fixed;
width: 100%;
top: 0;
}

4.  בנוסף – ניצור class שבו יהיו השינויים שנרצה שיקרו לאחר הגלילה

.ChangeHeaderOnScroll{

background-color:white;

transition: background 500ms ease-out;

}

למשל הדוגמא בקוד הזה  תגרום לכך שאחרי הגלילה הרקע ישתנה לצבע לבן, בצורת אנימציה עדינה ונעימה לעין תוכלו להוסיף שם מה שתרצו שיקרה , (למשל כמו שינוי גובה ועוד)

ושלב אחרון – נכתוב סקריפט   שיוסיף את ה class עם השינויים שאנחנו רוצים שיהיו בהידר לאחר הגלילה

jQuery(window).ready(function() {

     jQuery(window).scroll(function() {

    var scroll = jQuery(window).scrollTop();

    if (scroll > 100) {

        jQuery("header").addClass("ChangeHeaderOnScroll");

    } else {

        jQuery("header").removeClass("ChangeHeaderOnScroll");

    }

});

});

מה בעצם קורה פה?

הקוד אומר דבר כזה – הצהרנו על משתנה שמכיל את הנקודה שבה האתר נמצא בגלילה, ובזמן גלילה מופעלת פונקציה שבודקת האם גללנו יותר מ 100 – יתווסף קלאס להידר שיכיל את השינויים שלנו (ובעצם ידרוס מאפיינים אחרים אם נרצה  כמו צבע רקע בדוגמא הנוכחית)

ואז מה שיקרה יהיה לנו header אחד קבוע באתר,  ומתי שנגדיר הוא יהיה מעוצב אחרת.

יתכן שבקוד jquery תצטרכו להחליף את הסלקטור "header" אם ההידר שלכם בנוי באמצעות תג אחר, או אם אתם רוצים תשנו את שם ה class (בדוגמא שלי זה ChangeHeaderOnScroll.

הקוד ב CodePen- לקריאה והעתקה נוחה

https://codepen.io/alon121/pen/rpeKYP

אם אתם מסתבכים – מוזמנים לפנות אלי אישית ואשתדל לעזור.

שאלות נפוצות :