נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

מדריך scrollTop של jQuery

מחבר:
בתאריך:

scrollTop() היא מתודה של jQuery שיודעת לבדוק כמה פיקסלים גוללים אלמנט כלפי מטה. נראה את המבנה:

$("element").scrollTop();

האלמנט יכול להיות כל אלמנט בדף דוגמת body , div וכיו"ב.

דרך נוספת להשתמש ב- scrollTopהיא לתת ערך אוטומטי של גלילה אנכית. לדוגמה:

$(body).scrollTop(300);

קוד זה יגרום לגלילה של 300 פיקסלים כלפי מטה.

 

הסקריפט שבמדריך משתמש ב-scrollTop() כדי לגרום להופעת פופ-אפ כשגוללים כלפי מטה. לחצו על הכפתור כדי לראות את הקוד בפעולה:

 

להדגמה

 

קוד שמאפשר הופעת פופ-אפ כשגוללים כלפי מטה

 

נתחיל בהטמ"ל. ניצור div עם id="popup-block" . לדוגמה:

<div id="popup-block">
   <p>
          <span class="close">X</span>
          <span id="recommandation"><u>כותרת: </u></span>
          <br />
   </p>
   <p class="some-content">
 תוכן מסוים  
   </p>
</div>

בדיב ניצור, לבד מהתוכן, את הספאן close שכולל בתוכו x, שלחיצה עליו תסגור את הפופ-אפ.

מאוד חשוב להגדיר את הדיב באמצעות CSS כ-; display: none כדי שלא ייראה כברירת מחדל, אלא רק כשאנחנו מעוניינים בזה, שזה בגלילה של הדף כלפי מטה.

 

כדי להבין את סקריפט ה-jQuery ששימש לכך, צריך להבין את הדברים הבאים:

1.      המתודה .height() נותנת את הגובה של האלמנט.

$(document).height()

הוא גובהו של כל התוכן בדף גם זה שאנחנו לא רואים אותו.

$(window).height()

הוא גובהו של החלון, שזה רק החלק שאותו אנחנו רואים.

2.      האירוע :

$(window).on('load' , function(){
  //משהו לביצוע
});

גורם להפעלת פונקציה כשנכנסים לדף או מרעננים אותו.

3.      האירוע:

$(window).on('scroll' , function(){
     //משהו לביצוע
});

גורם להפעלת פונקציה כשגוללים את הדף.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
 (function($) {
   //המשתנה שמכיל את הפופ-אפ
    var popupBlock = $("#popup-block");
 
   //הפונקציה שמציגה את הפופ-אפ, ומאפשרת סגירה של הפופ-אפ בלחיצה על האיקס
   function popUpAppear()
   { 
      popupBlock.fadeIn(500);
  
      var close = $('.close');
  
      close.on('click', function(){
          popUpDisappear();
      });
   }
 
   //הפונקציה שמסתירה את הפופ-אפ
   function popUpDisappear()
   {
      popupBlock.fadeOut(500);
    }
    
    //משתנים לגובה החלון ולגובה המסמך
    var docHeight = $(document).height(),
    winHeight = $(window).height();
    
    //קורא לפונקציה בטעינת המסמך אם גובה המסמך קצר מגובה החלון           
    $(window).on('load' , function(){
  
    if( winHeight >= docHeight) {
          popUpAppear();
       }
     });
 
//קורא לפונקציה שמציגה את הפופ-אפ כשגוללים כלפי מטה
//קורא לפונקציה שמסתירה את הפופ-אפ כשגוללים כלפי מעלה
$(window).on('scroll' , function(){

var scrollTop = $(this).scrollTop(),
delta = docHeight - winHeight;

if( scrollTop >= delta)
{
 popUpAppear();
}
else
 {
    popUpDisappear();
 
 }
});
})(jQuery);
</script>

 

ה-CSS של הפופ-אפ כולל את המרכיבים ההכרחיים הבאים:

#popup-block {
     display: none;
     z-index: 10000;
     position: fixed;
     bottom: 75px;
    }

display: none - גורם לזה שהאלמנט לא ייראה עד שגוללים למטה. אז הפופ-אפ מופיע באמצעות fadeIn.

z-index: 10000 - מאפשר להציג את האלמנט מעל לתוכן הדף.

position: fixed ביחד עם bottom: 75px מאפשר להציג את הפופ-אפ בגובה שרוצים מתחתית הדף.

 

קוד זה נבדק ונמצא שהוא פועל היטב בדפדפנים: Chrome, Opera, Firefox, Safari ו-IE9.

 

למדריך הבא בסדרת ה-jQuery

לכל מדריכי ה-jQuery

הוסף תגובה חדשה

 

= 5 + 5