Apparition DIV en fonction de l'emplacement Résolu

Question

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 ?

aladin07 · Accepted Answer

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');
		});
	}
});

aladin07 · Answer

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');
});

aladin07 · Answer

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.

Apparition DIV en fonction de l'emplacement

3 réponses

Discussions similaires

Newsletters