11540 sujets

JavaScript, DOM et API Web HTML5

DIV visible après avoir scroller vers le bas.

Bonjour,

J'espère ne pas avoir fait doublon avec un autre sujet que je n'ai pas trouvé...

Voilà mon problème:
J'ai une FAQ assez longue avec un menu sur le haut qui renvoi vers des #anchor. Très bien.
J'aimerais que lorsque je scroll vers le bas (d'environ 100px) ou lorsque je suis renvoyé vers une #anchor plus basse que 100px une DIV (Haut de Page) apparaisse. Cette div sera située en bas à droite de la page en position: fixed;

J'en déduis que je dois utiliser JS, et récupérer la position de mon scroll pour oui ou non modifier le css de ma div mais mes tentatives ne donnent rien pour le moment...

J'espère avoir était assez clair dans mes explications et vous remercie d'avances pour l'aide que vous pourrez m'apporter !
Salut,

Probablement un truc dans le style de :
$(window).scroll(function() {
    $('#div_haut_de_page').toggle($(this).scrollTop() > 100);
});

Modifié par marcv (13 Mar 2013 - 09:07)
Salut

Oui en Jqery tu peux : 


function scroll_item(id) {
	//	On calcule la position de base de l'élément
	if(typeof(tab) == 'undefined')
		tab = new Array;
	if(typeof(tab[id]) == 'undefined') {
		pos			=	$('#'+id).position();
		tab[id]		=	pos.top;
	}
	
	//	On calcule ensuite la position du scroll
	var screenpos	=	window.pageYOffset;
	
	$('#'+id).css('position', 'relative');
	//	Si le scroll est supérieur à la position initiale de l'élément, on décale celui-ci, sinon on le remet à sa position initiale
	if(screenpos > tab[id])
		$('#'+id).css('top', screenpos+'px');
	else
		$('#'+id).css('top', '0px');
}


Pour la faire fonctionner, il faut tout d'abord télécharger et appeler les fonctions de base jQuery sur ton site : http://jquery.com/
Il faut ensuite lancer la fonction lors du scroll de la page :

$(document).ready(function() {
	$(window).scroll(function() {
		scroll_item('id_de_ton_menu');				
	});
});


Tu personnaliseras bien entendu l'appel de la fonction avec l'id de ton menu.
Modifié par JuseN (13 Mar 2013 - 11:03)
Bonjour,

Merci @JuseN ! Je regarde ça ce soir car la je suis au boulot.
Je vais l'adapter car il faut que ma div soit en bas de l'écran lorsqu'elle devient visible, donc ça pas de problème, et il faut qu'elle arrête de descendre quand le pied de page commence.

En gros si vous descendez dans http://realia.jimdo.com/ vous voyez le bouton apparaitre, voilà l'effet que je recherche. Mais mon pied de page est plus gros que le leur, et quand je descends je ne veux pas que ma div passe en dessous ni au dessus mais s’arrête contre le haut du pied de page.

http://www.topachat.com/accueil/index.php a aussi le même effet que je cherche, mais le bouton vers le retour en haut de page passe par dessus leur footer, moi je veux que mon bouton s'arrête contre le haut du footer. (mon footer est loin d'être aussi énorme que le leur)

Techniquement je la met en position: fixed; juste entre mon contenu et mon pied de page, elle garde sa position fixed jusqu'à se que le pied de page apparait et la elle devient relative. Donc ton code aura double emploi, rendre visible la div et la passer en relative en bas de page.

Je suis pas super claire désolé...
Modifié par BlAzAk (13 Mar 2013 - 16:03)
Sujet clos
Aller à