Événement déclencheur lorsque l'utilisateur fait défiler vers un élément spécifique-avec jQuery
j'ai un h1 qui est au bas d'une page..
<h1 id="scroll-to">TRIGGER EVENT WHEN SCROLLED TO.</h1>
et je veux déclencher une alerte lorsque l'utilisateur fait défiler pour le h1, ou est-il dans son navigateur.
$('#scroll-to').scroll(function() {
alert('you have scrolled to the h1!');
});
comment faire?
9 réponses
vous pouvez calculer le offset
de l'élément et ensuite comparer avec le scroll
valeur comme:
$(window).scroll(function() {
var hT = $('#scroll-to').offset().top,
hH = $('#scroll-to').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH)){
console.log('H1 on the view!');
}
});
Cochez cette Démo Violon
mise à Jour Démo Violon aucune alerte, au lieu FadeIn() l'élément
code mis à jour pour vérifier si le l'élément est à l'intérieur de la fenêtre ou pas. Ainsi cela fonctionne si vous faites défiler vers le haut ou vers le bas en ajoutant quelques règles à l'instruction if:
if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
//Do something
}
combinant cette question avec la meilleure réponse de jQuery action de déclenchement quand un utilisateur défile au-delà d'une certaine partie de la page
var element_position = $('#scroll-to').offset().top;
$(window).on('scroll', function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = element_position;
if(y_scroll_pos > scroll_pos_test) {
//do stuff
}
});
mise à JOUR
j'ai amélioré le code pour qu'il se déclenche quand l'élément est à mi-hauteur de l'écran plutôt qu'en haut. Il déclenche également le code si l'utilisateur atteint le bas de l'écran et la fonction n'a pas encore tiré.
var element_position = $('#scroll-to').offset().top;
var screen_height = $(window).height();
var activation_offset = 0.5;//determines how far up the the page the element needs to be before triggering the function
var activation_point = element_position - (screen_height * activation_offset);
var max_scroll_height = $('body').height() - screen_height - 5;//-5 for a little bit of buffer
//Does something when user scrolls to it OR
//Does it when user has reached the bottom of the page and hasn't triggered the function yet
$(window).on('scroll', function() {
var y_scroll_pos = window.pageYOffset;
var element_in_view = y_scroll_pos > activation_point;
var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view;
if(element_in_view || has_reached_bottom_of_page) {
//Do something
}
});
je pense que votre meilleur pari serait de tirer parti d'une bibliothèque existante qui fait cela même chose:
http://imakewebthings.com/jquery-waypoints /
Vous pouvez ajouter des écouteurs à votre éléments qui se déclenche lorsque votre élément de frappe le haut de la fenêtre:
$('#scroll-to').waypoint(function() {
alert('you have scrolled to the h1!');
});
Pour une incroyable démonstration de ce à utiliser:
http://tympanus.net/codrops/2013/07/16/on-scroll-header-effects /
inview library a déclenché l'événement et fonctionne bien avec jquery 1.8 et plus! https://github.com/protonet/jquery.inview
$('div').on('inview', function (event, visible) {
if (visible == true) {
// element is now visible in the viewport
} else {
// element has gone out of viewport
}
});
Lire https://remysharp.com/2009/01/26/element-in-view-event-plugin
C'est ce dont vous avez besoin.
Javascript:
$(window).scroll(function() {
var hT = $('#circle').offset().top,
hH = $('#circle').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
console.log((hT - wH), wS);
if (wS > (hT + hH - wH)) {
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 900,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}
});
}); {
$('.count').removeClass('count').addClass('counted');
};
}
});
CSS:
#circle
{
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
float:left;
margin:5px;
}
.count, .counted
{
line-height: 100px;
color:white;
margin-left:30px;
font-size:25px;
}
#talkbubble {
width: 120px;
height: 80px;
background: green;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float:left;
margin:20px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 15px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 20px solid green;
border-bottom: 13px solid transparent;
}
HTML:
<div id="talkbubble"><span class="count">145</span></div>
<div style="clear:both"></div>
<div id="talkbubble"><span class="count">145</span></div>
<div style="clear:both"></div>
<div id="circle"><span class="count">1234</span></div>
vérifiez ce bootply: http://www.bootply.com/atin_agarwal2/cJBywxX5Qp
vous pouvez utiliser jQuery plugin avec le inview
événement comme ceci:
jQuery('.your-class-here').one('inview', function (event, visible) {
if (visible == true) {
//Enjoy !
}
});
lien : https://remysharp.com/2009/01/26/element-in-view-event-plugin
juste une modification rapide à la réponse de DaniP, pour quiconque traitant des éléments qui peuvent parfois s'étendre au-delà des limites du viewport de l'appareil.
a ajouté juste un petit conditionnel - dans le cas d'éléments qui sont plus grands que le viewport, l'élément sera révélé une fois que sa moitié supérieure aura complètement rempli le viewport.
function elementInView(el) {
// The vertical distance between the top of the page and the top of the element.
var elementOffset = $(el).offset().top;
// The height of the element, including padding and borders.
var elementOuterHeight = $(el).outerHeight();
// Height of the window without margins, padding, borders.
var windowHeight = $(window).height();
// The vertical distance between the top of the page and the top of the viewport.
var scrollOffset = $(this).scrollTop();
if (elementOuterHeight < windowHeight) {
// Element is smaller than viewport.
if (scrollOffset > (elementOffset + elementOuterHeight - windowHeight)) {
// Element is completely inside viewport, reveal the element!
return true;
}
} else {
// Element is larger than the viewport, handle visibility differently.
// Consider it visible as soon as it's top half has filled the viewport.
if (scrollOffset > elementOffset) {
// The top of the viewport has touched the top of the element, reveal the element!
return true;
}
}
return false;
}
si vous faites beaucoup de fonctionnalités basées sur la position de défilement, Faites défiler magic ( http://scrollmagic.io / ) est entièrement construit à cet effet.
il rend facile de déclencher JS basé sur quand l'utilisateur atteint certains éléments lors du défilement. Il s'intègre également avec le moteur d'animation GSAP ( https://greensock.com / ) qui est idéal pour les sites de défilement de parallaxe
, Vous pouvez utiliser ceci pour tous les appareils,
$(document).on('scroll', function() {
if( $(this).scrollTop() >= $('#target_element').position().top ){
do_something();
}
});