11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Javascript apparition au scroll

Bonjour,
je sollicite votre aide pour une question qui va peut-être vous paraître idiote, voilà, je suis nouveau sur le site et donc tres mauvais en javascript, ma question est la suivante :

Je creer actuellement mon propre site web, et j'aimerais que lorsque l'on scroll, a un moment précis une <div> alors cachée apparaît, j'ai trouvé un script javascript qui marche, mais j'aimerais répéter l'opération plus bas dans la page et plusieures fois (par ex: tout les 768px),
j'aimerais donc savoir si je doit répéter l'entier de mon code (ci-dessous) pour chaque éléments plus bas dans la page ou si il y a moyen de faire plus simplement (genre nommé plusieurs id et valeur sur la meme ligne)???

J'éspère avoir été assez clair et vous remercie de votre lecture.

Voici mon code (l'id b1 et t1 son les premier et j'aimerais répéter l'opération tout les 768 px 8x dans ma page:

<script type="text/javascript">					

$(document).ready(function(){
	
    $("#t1").hide();
     
    // faire apparaitre #text1
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 650 ) {
                $('#t1').fadeIn(300);
            } else {
                $('#t1').fadeOut(300);
            }
    });
	
	    $("#b1").hide();
     
    // faire apparaitre bulle1
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 400 ) {
                $('#b1').fadeIn(500);
            } else {
                $('#b1').fadeOut(500);
            }
			
        });
    });
});

</script>


Merci
Modifié par Lazlo24 (30 Jan 2013 - 15:02)
Salut,

j'ai pas exactement saisi ce que tu veux faire ( si le gars scroll jusqu'en bas tout doit apparaitre ? ou bien certains doivent disparaitre quand d'autre apparaissent ?)
Je pense que tu devrais faire une seule fonction , mais avec plusieurs if else dedans.
Selon ce que tu veux faire, cela va influencer sur les conditions des "if"


 $("#t1").hide();
 $("#b1").hide();

$(function () {
        $(window).scroll(function () {
             if ($(this).scrollTop() > 400 ) {
                $('#b1').fadeIn(500);
            } else {
                $('#b1').fadeOut(500);
            }

            if ($(this).scrollTop() > 650 ) {
                $('#t1').fadeIn(300);
            } else {
                $('#t1').fadeOut(300);
            }
    });
Salut Mathieu,

merci pour ton aide Smiley biggrin

Ce que j'aimerais c'est que au fil que le gars scroll des éléments apparaissent
par ex : En scrollant jusqu'a 600px une image apparait (et reste) et en continuant plus bas, disons à 1400px une suivante apparait et ainsi de suite jusqu'au fond.

Tu vois le genre ?

Encore merci pour ton aide !
Mouais bah alors ca devrait etre ca Smiley smile
Est ce qu'il y a besoin que les images disparaissent quand on re scroll vers le haut ?
Parce que sinon les "else" ne servent pas non plus je pense Smiley smile
Donc je dois remettre le code en entier pour chaque élément?

comme ceci par ex:

[code=js
$("#t1").hide();
$("#b1").hide();

$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 400 ) {
$('#b1').fadeIn(500);
} else {
$('#b1').fadeOut(500);
}

if ($(this).scrollTop() > 650 ) {
$('#t1').fadeIn(300);
} else {
$('#t1').fadeOut(300);
}
});

$("#t2").hide();
$("#b2").hide();

$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 800 ) {
$('#b1').fadeIn(500);
} else {
$('#b1').fadeOut(500);
}

if ($(this).scrollTop() > 1300 ) {
$('#t1').fadeIn(300);
} else {
$('#t1').fadeOut(300);
}
});



][/code]

Ou bien il y a plus simple ?
Non non non .. tu met TOUT dans une seule fonction ...


// on cache tout
$("#t1").hide();
$("#b1").hide();
$("#t2").hide();
$("#b2").hide();
$("#t3").hide();
$("#b3").hide();
$("#t4").hide();
$("#b4").hide();

//la seule fonction sur le scroll 
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 400 ) {
$('#b1').fadeIn(500);
} else {
$('#b1').fadeOut(500);
}

if ($(this).scrollTop() > 650 ) {
$('#t1').fadeIn(300);
} else {
$('#t1').fadeOut(300);
}


if ($(this).scrollTop() > 650 ) {
$('#t2').fadeIn(300);
} else {
$('#t2').fadeOut(300);
}

...

});

Modifié par mathieu1004 (31 Jan 2013 - 15:47)
Ok super, je vais faire comme ça, merci mille fois.

Ps: j'suis vraiment une bille en javascript,
mais on en apprends tout les jours Smiley cligne
Bon résolu c'est cool.

Juste pour le détail par contre , separé chaque "if else" pour chaque b1,b2,...t1,t2.. c'est pratique d'un point de vue simplicité du code a comprendre , mais par contre ce n'est pas particulièrement efficace. En effet, il va tester systématiquement tous les "ifs else" , même si en sachant que si le premier est faux, ils le seront forcement tous. Je pense pas que se soit dramatique , mais je tenais juste à le signaler Smiley smile

Bonne journée
Hop petit exemple d'imbrication :

// on cache tout, ca change pas, c'est l'initialisation
$("#t1").hide();
$("#b1").hide();
$("#t2").hide();
$("#b2").hide();
$("#t3").hide();
$("#b3").hide();
$("#t4").hide();
$("#b4").hide();

//la seule fonction sur le scroll 
$(function () {
$(window).scroll(function () {

//On inverse : on commence par si on est a moins de 400
if ($(this).scrollTop() < 400 ) 
{
    $('#b1').fadeOut(500); // on cache ( i.e on vient de remonté trop haut)
}
else if ($(this).scrollTop() < 650 ) // on est a moins de 650 ( mais plus de 400)
{
$('#b1').fadeIn(500); //on montre b1
$('#t1').fadeOut(300);//on cache t1
}
else if($(this).scrollTop() < 800 )// on est a moins de 800 ( mais plus de 650)
{
$('#t1').fadeIn(300); //on montre t1
$('#b2').fadeOut(500); //on cache b2
}
else if($(this).scrollTop() < ...) // et ainsi de suite pour chaque valeur
{
...

}


PS : Je suis parti depuis le "début" du coup j'ai du inversé ta condition, on aurait pu partir de la fin de la page et imbriqué en remontant vers le haut de la page. if > 2400 affiche le dernier sinon si > 2000 cache le dernier affiche l'avant dernier et ainsi de suite jusqu'a ton if > 400

Voila bonne journée
Sujet clos
Aller à