Fixer un élément en haut de page au scroll [Résolu/Fermé]

Signaler
Messages postés
64
Date d'inscription
dimanche 16 décembre 2012
Statut
Membre
Dernière intervention
16 janvier 2018
 -
Messages postés
64
Date d'inscription
dimanche 16 décembre 2012
Statut
Membre
Dernière intervention
16 janvier 2018
 -
Bonjour !
Je cherche à réaliser une entête, composée d'un bandeau, et en dessous d'un menu horizontal.
Au scroll, j'aimerai que le bandeau sorte de la page pour faire de la place, mais que le menu reste fixé en haut de page, pour qu'il soit toujours accessible.
J'ai su fixer toute l'entête en haut de page : http://codepen.io/Oluram/pen/yfbid , mais je ne sais pas comment faire pour que seule la partie menu se fixe (une fois qu'elle est en haut de page bien sûr)

Sauriez-vous m'aider ? Merci d'avance ! :)
Afficher la suite

6 réponses

Réponse 1 / 6
Messages postés
1706
Date d'inscription
jeudi 28 août 2008
Statut
Membre
Dernière intervention
13 mai 2018
 324
Tu connais la propriété CSS position ?
EDIT : J'active pas JavaScript sur les sites inconnus.

___/\_canarder_/\___
~Waterfox|Palemoon~
Réponse 2 / 6
Messages postés
64
Date d'inscription
dimanche 16 décembre 2012
Statut
Membre
Dernière intervention
16 janvier 2018
 2
Oui, c'est ce que j'ai utilisé pour fixer mon entête.
J'aurais bien été tenté de mettre position : fixed; sur mon menu horizontal, mais elle serait toujours restée à son emplacement de départ (hors son emplacement de départ n'est pas le haut de la page).
Enfin j'imagine que ce n'est pas possible de se représenter ce que j'ai fait et ce que je veux comme résultat sans regarder ce que j'ai déjà fait.
Codepen est un site en lequel on peut avoir confiance je pense :)
Signaler
Messages postés
1706
Date d'inscription
jeudi 28 août 2008
Statut
Membre
Dernière intervention
13 mai 2018
 324
Et relative ?
J'utilise uniquement jsfiddle.
Signaler
Messages postés
64
Date d'inscription
dimanche 16 décembre 2012
Statut
Membre
Dernière intervention
16 janvier 2018
 2
Euh je ne vois pas comment faire ça avec relative.
Voilà le code sur jsfiddle :) http://jsfiddle.net/Oluram/v6jc1tvt/
Réponse 3 / 6
Messages postés
3549
Date d'inscription
mercredi 20 septembre 2006
Statut
Membre
Dernière intervention
30 septembre 2020
 766
Salut,
Avec le débogueur de ton navigateur, tu peux analyser le pourquoi du comment de la flèche noire semi-transparente en haut à droite de la présente page...
Signaler
Messages postés
64
Date d'inscription
dimanche 16 décembre 2012
Statut
Membre
Dernière intervention
16 janvier 2018
 2
Bonjour,
La flèche noire ? Je ne vois pas du tout de quoi tu parles, ni le rapport avec ma question.
Signaler
Messages postés
3549
Date d'inscription
mercredi 20 septembre 2006
Statut
Membre
Dernière intervention
30 septembre 2020
 766
vois réponse par ailleurs.
Signaler
Messages postés
64
Date d'inscription
dimanche 16 décembre 2012
Statut
Membre
Dernière intervention
16 janvier 2018
 2
Ah d'accord, je ne comprenais pas que tu parlais de cette page là :)
Je vais regarder, mais le comportement de la flèche ne n'est pas ce que je recherche pour mon menu.
Réponse 4 / 6
Messages postés
1706
Date d'inscription
jeudi 28 août 2008
Statut
Membre
Dernière intervention
13 mai 2018
 324
Voilà : http://jsfiddle.net/bgjvm6so/

J'ai utilisé z-index.

EDIT : J'ai inversé les blocs demandés, mais tu devrais corriger ça.

___/\_canarder_/\___
~Waterfox|Palemoon~
Signaler
Messages postés
64
Date d'inscription
dimanche 16 décembre 2012
Statut
Membre
Dernière intervention
16 janvier 2018
 2
Merci pour ton aide, mais le résultat n'est pas ce que je cherche. Je souhaite que le menu reste en haut de page (donc la deuxième partie, pas la première).
Si c'est de ça que tu parle quand tu dis que tu as inversé les blocs, désolé mais je ne vois pas comment faire (à vrai dire, je ne comprends pas pourquoi tu as utilisé des z-index, il me semble que le résultat est le même en les enlevant).
Je pense que je me suis mal expliqué. J'ai fait un schéma pour être bien clair dans le résultat que je veux : http://www.hostingpics.net/viewer.php?id=439456demobandeau.jpg
Signaler
Messages postés
1706
Date d'inscription
jeudi 28 août 2008
Statut
Membre
Dernière intervention
13 mai 2018
 324
Ah ok, j'ai compris, là je sais pas faire désolé. Si tu trouves un site avec cet effet, je peux t'aider à te le copier.
Réponse 5 / 6
Messages postés
3549
Date d'inscription
mercredi 20 septembre 2006
Statut
Membre
Dernière intervention
30 septembre 2020
 766
Quand tu fais défiler ce forum, il apparaît la flèche une flèche blanche sur un fond noir, fixe par rapport à l'écran dont le fonctionnement me paraît correspondre à ta question :
Signaler
Messages postés
64
Date d'inscription
dimanche 16 décembre 2012
Statut
Membre
Dernière intervention
16 janvier 2018
 2
Merci pour ta réponse, mais cette flèche ne correspond pas à ce que je souhaite faire.
Je pense que je me suis mal expliqué, donc j'ai fait ce schéma pour clarifier ce que je recherche : http://www.hostingpics.net/viewer.php?id=439456demobandeau.jpg
Signaler
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
 586
salut
va voir cette page avec uniquement javascript + css
http://jsfiddle.net/AUsnL/
Réponse 6 / 6
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
 586
Bon aller comme je suis gentil voila la solution (jquery) 



<html>
<head>

<style type="text/css">
#top {
height:200px;
background:red;
width:100%;
}
#menu {
height:80px;
background:black;
width:100%;
}
.fixed {
position:fixed;
top:0;
left:0;
}
#page {
height:5000px;
background:yellow;
width:100%;
}
</style>

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

 <script type="text/javascript" language="javascript">
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 200) {
        $("#menu").addClass("fixed");
    } else {
        $("#menu").removeClass("fixed");
    }
});
</script>

</head>
<body>

<div id="top"></div>
<div id="menu"></div>
<div id="page"></div>

</body>
</html>





Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
Afficher les 8 commentaires
Signaler
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
 586
Dans le 1er code la barre qui se fixe sera toujours en bas de page au début
dans le 2eme elle est en dessous de la banière (rouge) dont tu peux définir la taille par css
#top {height:200px;

et le jquery fixe #menu à 200px de scroll
if (scroll >= 200)
Signaler
Messages postés
64
Date d'inscription
dimanche 16 décembre 2012
Statut
Membre
Dernière intervention
16 janvier 2018
 2
Ah d'accord, j'avais pas remarqué ça.
Tout s'est bien passé, merci beaucoup pour ton aide !
Signaler
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
 586
ok bye
Signaler
Messages postés
1706
Date d'inscription
jeudi 28 août 2008
Statut
Membre
Dernière intervention
13 mai 2018
 324
Utiliser JS dans un style c'est catastrophique ...
Signaler
Messages postés
64
Date d'inscription
dimanche 16 décembre 2012
Statut
Membre
Dernière intervention
16 janvier 2018
 2
canarder : Qu'est-ce que tu veux dire ?
Posez votre question