Fixer un élément en haut de page au scroll
Résolu/Fermé
Oluram
Oluram
- Messages postés
- 65
- Date d'inscription
- dimanche 16 décembre 2012
- Statut
- Membre
- Dernière intervention
- 14 novembre 2020
Oluram
- Messages postés
- 65
- Date d'inscription
- dimanche 16 décembre 2012
- Statut
- Membre
- Dernière intervention
- 14 novembre 2020
A voir également:
- Fixer la barre de navigation au scroll css
- Fixer la barre de navigation au scroll - Meilleures réponses
- Fixer un élément en haut de page au scroll ✓ - Forum - CSS
- Fixer un menu en haut de page css ✓ - Forum - Webmaster
- Menu fixe haut de page ✓ - Forum - Programmation
- Bandeau et menu fixes en haut de page ✓ - Forum - Webmaster
- Html bandeau haut de page ✓ - Forum - Webmaster
6 réponses
telliak
8 oct. 2014 à 16:58
- Messages postés
- 3627
- Date d'inscription
- mercredi 20 septembre 2006
- Statut
- Membre
- Dernière intervention
- 20 mai 2022
8 oct. 2014 à 16:58
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 :


canarder
Modifié par canarder le 7/10/2014 à 19:33
- Messages postés
- 1706
- Date d'inscription
- jeudi 28 août 2008
- Statut
- Membre
- Dernière intervention
- 13 mai 2018
Modifié par canarder le 7/10/2014 à 19:33
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~
Oluram
7 oct. 2014 à 19:42
- Messages postés
- 65
- Date d'inscription
- dimanche 16 décembre 2012
- Statut
- Membre
- Dernière intervention
- 14 novembre 2020
7 oct. 2014 à 19:42
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 :)
canarder
Modifié par canarder le 7/10/2014 à 20:28
- Messages postés
- 1706
- Date d'inscription
- jeudi 28 août 2008
- Statut
- Membre
- Dernière intervention
- 13 mai 2018
Modifié par canarder le 7/10/2014 à 20:28
Et relative ?
J'utilise uniquement jsfiddle.
J'utilise uniquement jsfiddle.
Oluram
7 oct. 2014 à 20:59
- Messages postés
- 65
- Date d'inscription
- dimanche 16 décembre 2012
- Statut
- Membre
- Dernière intervention
- 14 novembre 2020
7 oct. 2014 à 20:59
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/
telliak
8 oct. 2014 à 11:13
- Messages postés
- 3627
- Date d'inscription
- mercredi 20 septembre 2006
- Statut
- Membre
- Dernière intervention
- 20 mai 2022
8 oct. 2014 à 11:13
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...
Oluram
8 oct. 2014 à 14:33
- Messages postés
- 65
- Date d'inscription
- dimanche 16 décembre 2012
- Statut
- Membre
- Dernière intervention
- 14 novembre 2020
8 oct. 2014 à 14:33
Bonjour,
La flèche noire ? Je ne vois pas du tout de quoi tu parles, ni le rapport avec ma question.
La flèche noire ? Je ne vois pas du tout de quoi tu parles, ni le rapport avec ma question.
telliak
8 oct. 2014 à 16:59
- Messages postés
- 3627
- Date d'inscription
- mercredi 20 septembre 2006
- Statut
- Membre
- Dernière intervention
- 20 mai 2022
8 oct. 2014 à 16:59
vois réponse par ailleurs.
Oluram
8 oct. 2014 à 19:02
- Messages postés
- 65
- Date d'inscription
- dimanche 16 décembre 2012
- Statut
- Membre
- Dernière intervention
- 14 novembre 2020
8 oct. 2014 à 19:02
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.
Je vais regarder, mais le comportement de la flèche ne n'est pas ce que je recherche pour mon menu.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
canarder
Modifié par canarder le 8/10/2014 à 17:19
- Messages postés
- 1706
- Date d'inscription
- jeudi 28 août 2008
- Statut
- Membre
- Dernière intervention
- 13 mai 2018
Modifié par canarder le 8/10/2014 à 17:19
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~
Oluram
8 oct. 2014 à 19:51
- Messages postés
- 65
- Date d'inscription
- dimanche 16 décembre 2012
- Statut
- Membre
- Dernière intervention
- 14 novembre 2020
8 oct. 2014 à 19:51
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
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
canarder
Modifié par canarder le 10/10/2014 à 22:18
- Messages postés
- 1706
- Date d'inscription
- jeudi 28 août 2008
- Statut
- Membre
- Dernière intervention
- 13 mai 2018
Modifié par canarder le 10/10/2014 à 22:18
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.
animostab
Modifié par animostab le 10/10/2014 à 15:27
- Messages postés
- 2829
- Date d'inscription
- jeudi 10 mars 2005
- Statut
- Membre
- Dernière intervention
- 11 novembre 2019
Modifié par animostab le 10/10/2014 à 15:27
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.
Oluram
10 oct. 2014 à 16:08
- Messages postés
- 65
- Date d'inscription
- dimanche 16 décembre 2012
- Statut
- Membre
- Dernière intervention
- 14 novembre 2020
10 oct. 2014 à 16:08
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
animostab
11 oct. 2014 à 14:55
- Messages postés
- 2829
- Date d'inscription
- jeudi 10 mars 2005
- Statut
- Membre
- Dernière intervention
- 11 novembre 2019
11 oct. 2014 à 14:55
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>
Oluram
12 oct. 2014 à 12:26
- Messages postés
- 65
- Date d'inscription
- dimanche 16 décembre 2012
- Statut
- Membre
- Dernière intervention
- 14 novembre 2020
12 oct. 2014 à 12:26
Je ne vois pas quelle est la différence de rendu entre les deux codes.
Désolé, je n'ai pas encore eu le temps d'intégrer ça à mon site depuis la dernière fois, je m'en occupe aujourd'hui. Je reviendrai vers toi si j'ai des soucis dans l'intégration.
Merci encore !
Désolé, je n'ai pas encore eu le temps d'intégrer ça à mon site depuis la dernière fois, je m'en occupe aujourd'hui. Je reviendrai vers toi si j'ai des soucis dans l'intégration.
Merci encore !
animostab
12 oct. 2014 à 13:12
- Messages postés
- 2829
- Date d'inscription
- jeudi 10 mars 2005
- Statut
- Membre
- Dernière intervention
- 11 novembre 2019
12 oct. 2014 à 13:12
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)
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)
Oluram
12 oct. 2014 à 19:24
- Messages postés
- 65
- Date d'inscription
- dimanche 16 décembre 2012
- Statut
- Membre
- Dernière intervention
- 14 novembre 2020
12 oct. 2014 à 19:24
Ah d'accord, j'avais pas remarqué ça.
Tout s'est bien passé, merci beaucoup pour ton aide !
Tout s'est bien passé, merci beaucoup pour ton aide !
8 oct. 2014 à 19:58
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
10 oct. 2014 à 14:33
va voir cette page avec uniquement javascript + css
http://jsfiddle.net/AUsnL/