Apparition DIV en fonction de l'emplacement
Résolu
imp3rium
Messages postés
23
Statut
Membre
-
aladin07 Messages postés 277 Date d'inscription Statut Membre Dernière intervention -
aladin07 Messages postés 277 Date d'inscription Statut Membre Dernière intervention -
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 ?
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:
- Apparition DIV en fonction de l'emplacement
- Fonction si et - Guide
- Fonction miroir - Guide
- Emplacement fichier host - Guide
- Div c++ - Télécharger - Langages
- Fonction moyenne excel - Guide
3 réponses
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');
});
}
});
imp3rium
Messages postés
23
Statut
Membre
3
Parfait ! Un grand MERCI !
aladin07
Messages postés
277
Date d'inscription
Statut
Membre
Dernière intervention
30
Ce fut un plaisir
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');
});
Si tu utilise jQuery:
var scroll = $(window).scrollTop();
$(window).scroll(function () {
if(scroll > 0) $('.navwrapper').css('width', '-135px');
else $('.navwrapper').css('width', '-250px');
});
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.
$(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.
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.
Est-ce que c'est compréhensible ? ><
Merci encore pour le temps que tu m'accordes.