מדריך 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="//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.
אהבתם? לא אהבתם? דרגו!
0 הצבעות, ממוצע 0 מתוך 5 כוכבים
