Fixer un élément en haut de page au scroll
Résolu
Oluram
Messages postés
64
Date d'inscription
Statut
Membre
Dernière intervention
-
Oluram Messages postés 64 Date d'inscription Statut Membre Dernière intervention -
Oluram Messages postés 64 Date d'inscription Statut Membre Dernière intervention -
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 ! :)
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 ! :)
A voir également:
- Fixer un élément en haut de page au scroll
- Impossible de supprimer une page word - Guide
- Comment imprimer un tableau excel sur une seule page - Guide
- Mettre google en page d'accueil - Guide
- Traduire une page en français - Guide
- Numéro de page word - Guide
6 réponses
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~
J'ai utilisé z-index.
EDIT : J'ai inversé les blocs demandés, mais tu devrais corriger ça.
___/\_canarder_/\___
~Waterfox|Palemoon~
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 :
Tu connais la propriété CSS position ?
EDIT : J'active pas JavaScript sur les sites inconnus.
___/\_canarder_/\___
~Waterfox|Palemoon~
EDIT : J'active pas JavaScript sur les sites inconnus.
___/\_canarder_/\___
~Waterfox|Palemoon~
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 :)
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 :)
Euh je ne vois pas comment faire ça avec relative.
Voilà le code sur jsfiddle :) http://jsfiddle.net/Oluram/v6jc1tvt/
Voilà le code sur jsfiddle :) http://jsfiddle.net/Oluram/v6jc1tvt/
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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...
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...
Bon aller comme je suis gentil voila la solution (jquery)
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.
<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.
Merci beaucoup pour tes deux réponses !
J'étais persuadé que c'était possible (et même simple) en CSS, et j'avoue que j'ai pas du tout pensé à le faire en JS (d'autant plus que j'aurais pas sû faire ce que tu as fait)
Du coup j'ai regardé ton code sur jsfiddle, et ça correspond bien à ce que je veux. Est-ce que le code en JQuery apporte un plus (autre que l'économie de lignes) ? Je demande parce que je débute et que je n'ai pas trop l'habitude du JQuery.
Encore merci d'avoir donné de ton temps pour m'aider ! :D
J'étais persuadé que c'était possible (et même simple) en CSS, et j'avoue que j'ai pas du tout pensé à le faire en JS (d'autant plus que j'aurais pas sû faire ce que tu as fait)
Du coup j'ai regardé ton code sur jsfiddle, et ça correspond bien à ce que je veux. Est-ce que le code en JQuery apporte un plus (autre que l'économie de lignes) ? Je demande parce que je débute et que je n'ai pas trop l'habitude du JQuery.
Encore merci d'avoir donné de ton temps pour m'aider ! :D
le 2eme code marche pour ce que tu veux
je l'ai mis la
http://jsfiddle.net/0vo90sok/5/ pour que tu vois ce que ca donne
jquery et une bibliothèque qui permet de simplifier l'ecriture de javascript il ne faut pas oublier de l'appeller dans ta page
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
je l'ai mis la
http://jsfiddle.net/0vo90sok/5/ pour que tu vois ce que ca donne
jquery et une bibliothèque qui permet de simplifier l'ecriture de javascript il ne faut pas oublier de l'appeller dans ta page
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
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