Apparition DIV en fonction de l'emplacement

Résolu/Fermé
imp3rium Messages postés 21 Date d'inscription samedi 31 mars 2007 Statut Membre Dernière intervention 10 juin 2012 - 9 juin 2012 à 19:30
aladin07 Messages postés 277 Date d'inscription vendredi 13 avril 2012 Statut Membre Dernière intervention 30 septembre 2012 - 9 juin 2012 à 20:56
Bonjour à tous,

Voilà, j'aimerais que ma NAV (le soleil/lune au top de la page) soit apparente (comme quand elle est en hover) quand on arrive sur la page du site et lors des premiers scrolls vers le bas qu'elle redevienne à sa position originale mais j'ignore totalement comment faire.

http://imp3rium.free.fr/sandvikfest/

Merci d'avance si vous pouvez m'éclaircir. Si vous avez besoin des code n'hésitez pas.

Déjà s'agit-il d'un effet JS ou CSS ?
A voir également:

3 réponses

aladin07 Messages postés 277 Date d'inscription vendredi 13 avril 2012 Statut Membre Dernière intervention 30 septembre 2012 30
Modifié par aladin07 le 9/06/2012 à 20:52
Normalement celle-là c'est la bonne:

$(window).scroll(function () {
	$nav = $('.navwrapper');
	var doc = document.documentElement, body = document.body;
	scroll = (doc && doc.scrollTop || body && body.scrollTop || 0);
	if(scroll == 0) 
	{
		$nav.css('top', '-135px');
	}
	else {
		$nav.css('top', '-250px');
		$nav.hover(function(){
			$nav.css('top', '-135px');
		}, function() {
			if(scroll != 0)
			$nav.css('top', '-250px');
		});
	}
}); 
2
imp3rium Messages postés 21 Date d'inscription samedi 31 mars 2007 Statut Membre Dernière intervention 10 juin 2012 3
9 juin 2012 à 20:55
Parfait ! Un grand MERCI !
0
aladin07 Messages postés 277 Date d'inscription vendredi 13 avril 2012 Statut Membre Dernière intervention 30 septembre 2012 30
9 juin 2012 à 20:56
Ce fut un plaisir
0
aladin07 Messages postés 277 Date d'inscription vendredi 13 avril 2012 Statut Membre Dernière intervention 30 septembre 2012 30
9 juin 2012 à 20:05
C'est du JavaScript.

Si tu utilise jQuery:

var scroll = $(window).scrollTop();

$(window).scroll(function () {
if(scroll > 0) $('.navwrapper').css('width', '-135px');
else $('.navwrapper').css('width', '-250px');
});
0
imp3rium Messages postés 21 Date d'inscription samedi 31 mars 2007 Statut Membre Dernière intervention 10 juin 2012 3
9 juin 2012 à 20:12
Oui je peux utiliser du JQuery. Par contre ton code ne marche pas. Je l'ai collé dans un nouvelle feuille JS et rien :(
0
aladin07 Messages postés 277 Date d'inscription vendredi 13 avril 2012 Statut Membre Dernière intervention 30 septembre 2012 30
Modifié par aladin07 le 9/06/2012 à 20:34
Désolé, je n'ai pas testé le code, essaie plutot:

$(window).scroll(function () {
$nav = $('.navwrapper');
var doc = document.documentElement, body = document.body;
scroll = (doc && doc.scrollTop || body && body.scrollTop || 0);
if(scroll > 0) $nav.css('top', '-250px');
else {
$nav.css('top', '-135px');
$nav.hover(function(){
$nav.css('top', '-135px');
}, function() {
$nav.css('top', '-250px');
});
}
});

Tu dois metre le .navwrapper par defaut à -135px. Enleve le :hover, tu n'en aura pas besoin.
0
imp3rium Messages postés 21 Date d'inscription samedi 31 mars 2007 Statut Membre Dernière intervention 10 juin 2012 3
9 juin 2012 à 20:33
Ah cool on a quelques choses mais pas ce que je veux. Avec ton code lorsque qu'on arrive la div n'est pas développée, elle se développe à partir du premier scroll. Moi ce que je veux c'est l'inverse, je voudrais qu'elle soit développée quand on arrive et qu'elle se cache à partir des premiers scroll.

Est-ce que c'est compréhensible ? ><
Merci encore pour le temps que tu m'accordes.
0
aladin07 Messages postés 277 Date d'inscription vendredi 13 avril 2012 Statut Membre Dernière intervention 30 septembre 2012 30
9 juin 2012 à 20:35
Recheck, j'ai modifié
0
imp3rium Messages postés 21 Date d'inscription samedi 31 mars 2007 Statut Membre Dernière intervention 10 juin 2012 3
9 juin 2012 à 20:40
Maintenant çà marche, y a l'effet voulu sauf que quand que je suis quelques part sur la page je ne peux pu me servir de la NAV elle se développe plus en hover. Il faut faut je retourne tout en haut de la page ^^
0
imp3rium Messages postés 21 Date d'inscription samedi 31 mars 2007 Statut Membre Dernière intervention 10 juin 2012 3
9 juin 2012 à 20:49
J'ai ré-upload la page pour que tu vois ;)
0