11528 sujets

JavaScript, DOM et API Web HTML5

Fixer un menu après scroll

Bonjour à tous,
J'aimerai faire un effet comme sur ce site http://mariannerestaurant.com/.
En gros j'ai bien ma grande image d'intro que j'ai mis en position fixed avec un z-index. Je fais passé mon bloc du dessous qui contient mon header par dessus, pas de problèmes.

Mais j'aimerai comme sur le site que le header une fois passé par dessus l'image reste fixé en haut.
Comment faire ?
Merci pour votre aide.
Bonjour,
Merci pour le retour rapide ma structure est du style :

<div id="GrandeIntro">
</div>
<div id="siteWrapper">
<header>
<div id="headerTop"></div>
<div id="Grandenavigation"><nav></nav></div>
</header>
</div>


Le css etant : 

#GrandeIntro
{
background:url(images/KdIntro.png);
background-size: cover;
background-repeat: no-repeat ;
height:500px;
width:100%;
z-index:1;
}
#siteWrapper
{
height:2000px;
z-index:2;
width:100%;
}
header
{
z-index:2;
height:24px;
margin-top:0px;
width:100%;
}
Ah oui ok. J'imaginais d'abord un menu qui reste en haut mais c'est un peu plus complexe comme ça.
Si tu trouves quelques chose, ta réponse m'intéresse...

++
Merci, c'est exactement ce que je voulais.
J'ai un peu du mal à comprendre la partie Jquery, Si tu peux expliquer brièvement comment il fonctionne ça serait + que parfait.
Merci encore.
Oui désolé, un peu la flemme tout à l'heure. Déjà c'est du JS pure et non du JQuery et le code ne fait en fait que récupérer la hauteur actuelle de la fenêtre à laquelle il soustrait la hauteur du <header>. Le code surveille ensuite le scroll et lorsque la valeur du scroll vertical atteint ou dépasse la valeur précédemment calculée il ajoute une classe "fixed" au <header>. C'est ensuite la partie CSS qui gère cette classe comme tu pourras voir dans le code.
Ok merci pour toutes les infos je vais tester ça dès demain !
Bonne soirée et si quelqu'un à deux trois solutions a apporter utilisant du Jquery n’hésitez pas.
Salut,

Essai le code suivant:
- en supposant que tu as créé un style pour fixer ton menu, du genre :

header.fixedHeader {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}

Alors dans ton code jquery, tu devrais avoir :

$(window).scroll(function() {
if(!$('header').hasClass("fixedHeader") && ($(window).scrollTop() > $(header').offset().top)) {
$('header').addClass("fixedHeader").data("top", $('header').offset().top);
}
else if ($('header').hasClass("fixedHeader") && ($(window).scrollTop() < $('header').data("top"))) {
$('header').removeClass("fixedHeader");
}
});

Attends ton retour !
Bonjour,
Le code Jquery ne fonctionne pas. Merci encore mais je vais donc partir sur le js !
Bonjour,
Non je ne cherche pas " à tout prix" à le faire en Jquery, c'était juste par curiosité ! Après la méthode en JS me convient très bien aussi
Bonjour.

Je vois que ça doit être résolu, mais je tenais juste à ajouter qu'il faudrait optimiser la taille de tes 3 images de background, il y en a pour 4.5Mio, ça fait beaucoup. J'ai pas une connexion de killer, mais j'en ai eu pour 40s à juste télécharger ces 3 images.

Voilà, c'était juste pour dire ça.
Bonjour et merci pour ce script. Cependant j'ai la même erreur que gabush (erreur : header is null)
Le menu disparaît en haut en scrollant.
Merci pour vos réponses
Modifié par manudeoli (22 Jan 2014 - 12:45)
Si "header is null" c'est que la variable "header" cible le mauvais élément. La variable est entièrement dépendante du HTML :

var header = document.querySelector("#siteWrapper header");

Donc "header" se réfère à "#siteWrapper header" au niveau du code HTML. S'il doit se référer à autre chose, dans ce cas il faut changer.
Sujet clos
Aller à