Se servir de la position dans la page pour déclencher un evenement

[youpitou]

Bonsoir à tous,
Je suis en train de creer un site internet et j'aimerais pouvoir faire slider une div (à l'aide de la fonction slide de jquery) quand l'utilisateur atteint un niveau bien précis du site (en utilisant sa position sur la page). Je cherche pas mal depuis 2 jours mais rien de marche j'ai peur de pas bien m'y prendre..

J'ai testé ceci dernièrement, pour déclencher le défilement du bloc quand on dépasse la hauteur de 800px, mais ça fonctionne pas:

Code :

1
2
3
4
var height = $(window).height();
if (height>800) {
$('#bloc2').animate({"left": "+=300px"}, "slow");
}

Si quelqu'un a déjà utilisé ce moyen, ou en connait un plus simple, je suis preneur
Merci d'avance

[MrPringle]

Enlève le "px" à la ligne 3, sinon ça devrait fonctionner.

Code :

1
2
 
$('#bloc2').animate({"left": "+=300"}, "slow");

Tu as testé une alert ou un console.log dans ton if pour voir si la condition est quelque fois vraie ?

[danielhagnoul]

Bonsoir

Pour animer un élément, celui-ci doit avoir une dimension (hauteur, largeur) et un positionnement ( position: relative; ) par exemple.

[youpitou]

Oui ça slide bien quand je demande à slider au chargement de la page par exemple, mais j'aimerais pouvoir lancer le slide justement quand on a dépassé une certaine hauteur de la page

[NoSmoking]

Bonsoir,
il faut mettre un observateur d'événement sur le scroll de la page et tester la position du scroll

Code :

1
2
3
4
5
$(window).scroll(function(){
    if( $(window).scrollTop() > 100){
      alert($(window).scrollTop());
    }
  });