Fixer un menu en haut de page lors du scroll

**dhillig** · 15/02/2016, 13h25

Bonjour à tous,

J'ai souvent utilisé les scripts (qu'on trouve aisément sur le net) permettant de bloquer un div/menu au scroll. Çela a toujours fonctionné.
Mais sur ma page actuelle, impossible de fixer le div #menu. J'ai vu et revu (changer) les CSS, idem pour le HTML, changer de script. Rien à faire.
Mon dernier espoir (avant développez.com

) était "sticky-master". Idem.

Les CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
    #menu {
      background: #bada55;
      color: white;
      font-family: Droid Sans;
      font-size: 18px;
      line-height: 1.6em;
      font-weight: bold;
      text-align: center;
      padding: 10px;
      text-shadow: 0 1px 1px rgba(0,0,0,.2);
      width:100%;
      box-sizing:border-box;
    }

Le HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
		<header class="header">
<h1>Titre<span>sous-titre</span></h1>
 
        <div id="menu">
    <ul>
        <li><a href="../index.html">Intro</a></li>
        <li><a href="../europeens.html">Européens</a></li>
        <li><a href="../americains.html">Américains</a></li>
        <li><a href="../dedicaces.html">Dédicaces</a></li>
        <li><a href="../presse.html">Presse</a></li>
        <li><a href="../divers.html">Divers</a></li>
    </ul></div></header>

Et le JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
	<script type="text/javascript" src="jquery.sticky.js"></script>
	<script>
    $(window).load(function(){
      $("#menu").sticky({ topSpacing: 0 });
    });
  </script>

Merci pour votre aide et bonne journée,
dh

Invité · 15/02/2016, 13h54

Bonjour,

as-tu vérifier que tu as bien initialisé jQuery, ainsi que le fichier jquery.sticky.js ?

qu'on trouve ici :

**dhillig** · 15/02/2016, 14h09

Bonjour jreaux62,

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<script src="../js/modernizr-custom.js"></script>
<script src="../js/imagesloaded.pkgd.min.js"></script>
<script src="../js/masonry.pkgd.min.js"></script>
<script src="../js/classie.js"></script>
<script src="../js/main.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.sticky.js"></script>

Puis les scripts avant </body>.

Y a-t-il un conflit possible ?

PS : "jquery.sticky.js" est bien au premier niveau.

Merci pour ton aide,
dh

Invité · 15/02/2016, 14h34

Envoyé par dhillig

.../jquery/1.4.2/jquery.min.js

On en est à jQuery v2.1.3 !

Mais bon, ça ne semble pas être le problème ici : http://codepen.io/jreaux62/pen/LGaxdd

Un conflit, peut-être. Mais sans accès à une page en ligne...

N.B. Pourquoi ne pas avoir mis le fichier jquery.sticky.js avec les autres, dans le dossier "js" ?

**dhillig** · 15/02/2016, 14h50

Ça ne fonctionne pas non plus

J'avais bien mis "jquery.sticky.js" dans le dossier js, mais comme ça ne fonctionnait pas, je l'ai mis à la source comme dans le démo (au cas où ce serait un prob de "chemin").

**dhillig** · 15/02/2016, 19h47

Ras-le-bol, j'ai décidé de mettre la page en ligne pour vous montrer, et là... MIRACLE, ça fonctionne !!!

C'est la première fois que je n'arrive pas à prévisualiser cet effet (div qui se fixe à top:0px). Des heures à chercher pour rien.

Quelqu'un aurait-il une idée du pourquoi ?

Bonne soirée et merci à vous,
dh

Invité · 15/02/2016, 21h06

...sais pas...

quelle est la page en ligne ?

**dhillig** · 16/02/2016, 07h03

Bonjour jreaux62,
La page en question (la même que celle avec le prob de zoom) :
http://extraboldital.com/divers.html
Bonne journée,
dh

**dhillig** · 27/02/2016, 12h34

Bonjour à tous,
Je pensais avoir trouvé la solution, mais c'était trop beau

Imposible de fixer ce #menu. !!! HELPPPPPPPPPPP !!!!!!
Je vous joins une page en cours de réalisation (désolé pour les vignettes non optimisées

).
http://extraboldital.com/dedicaces.html
HELLLLLLLPPPPPPPPPPPPPPPP !!!!!!
ça fait des jours que je cherche

Merci pour votre aide et bon week-end,
dh

Invité · 27/02/2016, 12h48

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="menu-sticky-wrapper" class="sticky-wrapper" style="height: 18px;">
  <div id="menu-sticky-wrapper" class="sticky-wrapper" style="height: 18px;">
...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
    $(window).load(function(){
      $("#menu").sticky({ topSpacing: 0 });
    });

"Y'a comme un défaut !"
Fernand Raynaud

[€] Oups ! pas vu le <div id="menu"> à l'intérieur...

Donc, l'erreur est ... tailleur*.
* du même Fernand Raynaud

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="Templates/jquery.sticky.js" type="text/javascript">

page non trouvée...

**dhillig** · 27/02/2016, 12h56

je ne comprends pas

**dhillig** · 28/02/2016, 19h22

Bonsoir Jérôme,
Peux-tu m'en dire davantage sur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="menu-sticky-wrapper" class="sticky-wrapper" style="height: 18px;">

? Je bloque

Merci et bonne soirée,
dh

**NoSmoking** · 29/02/2016, 21h25

Bonjour,

Peux-tu m'en dire davantage sur :

$("#menu") correspond à la sélection d'un élément dont l'ID est 'menu'.

Donc pour sélectionner l'élément <div id="menu-sticky-wrapper" on doit écrire .....à compléter avec le bon code

**dhillig** · 29/02/2016, 22h25

Bonsoir NoSmoking,
Merci pour ton aide. Je vais faire des tests demain.
Cette page m'en fait voir de toutes les couleurs (voir l'autre discussion non résolue

Bonne soirée,
dh

**dhillig** · 29/02/2016, 23h23

re_Bonsoir NoSmoking,
Je tente de comprendre... en vain

J'ai remis la page en ligne, je pense avoir fait n'importe quoi

http://extraboldital.com/dedicaces.html
Merci pour ton aide et bonne soirée,
dh

**zadoner33** · 01/03/2016, 15h14

Je regarde ta page en ligne et un truc que tu ne sembles pas avoir changé/compris :
Dans ton script tu as écris :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
   $(window).load(function(){
      $("#menu").sticky({ topSpacing: 0 });
    });

Or, ton menu a pour id="menu-sticky-wrapper" ( qui est donc différent de #menu ), commence donc par faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
   $(window).load(function(){
      $("#menu-sticky-wrapper").sticky({ topSpacing: 0 });
    });

**dhillig** · 01/03/2016, 16h10

Bonjour zadoner33 et merci pour ta réponse

D'un seul coup, la réponse de NoSmoking me semble claire (elle l'était) et la réponse évidente.
Malheureusement, comme tu peux le voir en ligne, le menu reste scrollable

Ne pouvant mettre de flèche "retour en haut" (voir mon autre discussion; la barre des menus fixe n'est pas un caprice, juste indispensable dans mon cas

Merci pour votre aide et bon après-midi,
dh

Invité · 01/03/2016, 17h30

Bonjour,

1/ Après avoir corrigé les erreurs de scripts... :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
    <div id="menu-sticky-wrapper" class="sticky-wrapper">
...
    </div>

Code jevascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
    $(window).load(function(){
      $("#menu-sticky-wrapper").sticky({ topSpacing: 0 });
    });

2/ Et tu as DEUX FOIS le même script !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<script src="js/jquery.sticky"></script> 
...
<script type="text/javascript" src="js/jquery.sticky.js"></script>

Il faut en supprimer un.

3/... j'ai fini par trouver la cause du dysfonctionnement, mais pas l'explication.
Ca vient... du CSS !

Plus précisément, de cette ligne :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
html, body {
...
	overflow-x: hidden;
...
}

supprime cet overflow, et le menu devient sticky...

N.B. Autre ligne qui me semble douteuse :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

@import url("file:///Sans titre/Users/davehillig/webfonts/holtwoodonesc/stylesheet.css");

**dhillig** · 01/03/2016, 22h23

Bonsoir MONSIEUR jreaux62,

Pas mal de corrections avaient déjà été effectuées (MERCI aux membres

)
Pour ce qui est du "holtwoodone", c'est la police initiale que j'ai oubliée de virer (
utilisée, j'aurais vu le prob je pense.

)
Le script qui doublonne, vu aussi et corrigé précédemment, mais j'ai du reprendre un mauvais template (je les duplique très souvent)

.
Mais alors là, pour les CSS : BRAVO

Ça me rappelle un problème d'overflow sur une de mes pages, un truc de dingue; tu avais trouvé une ligne a suppprimer dans les CSS de base de Fancybox... TROP FORT !!!

Merci pour tout et bonne soirée

dh
NB : et merci d'avoir jeté un œil sur le code

Fixer un menu en haut de page lors du scroll

JavaScript

Discussions similaires

Partager

Partager