Fixer un menu en haut de page lors du scroll

Version imprimable

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. :calim2:

Les CSS :

Code:

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:

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:

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

15/02/2016, 13h54
Invité
Bonjour,

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

qu'on trouve ici :
- http://cdnjs.cloudflare.com/ajax/lib.../jquery.min.js
- http://stickyjs.com/jquery.sticky.js

Bonjour jreaux62,

Code:

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

15/02/2016, 14h34
Invité

Citation:

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" ? :koi:
15/02/2016, 14h50
dhillig

Ç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").
:calim2:
15/02/2016, 19h47
dhillig

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. :weird:
Quelqu'un aurait-il une idée du pourquoi ?

Bonne soirée et merci à vous,
dh
15/02/2016, 21h06
Invité

...sais pas... :koi:
quelle est la page en ligne ?
16/02/2016, 07h03
dhillig

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
27/02/2016, 12h34
dhillig

"ça mâche pô" (Garcimore. Antenne 2, 1981)

Bonjour à tous,
Je pensais avoir trouvé la solution, mais c'était trop beau :weird:
Imposible de fixer ce #menu. !!! HELPPPPPPPPPPP !!!!!!
Je vous joins une page en cours de réalisation (désolé pour les vignettes non optimisées :oops: ).
http://extraboldital.com/dedicaces.html
HELLLLLLLPPPPPPPPPPPPPPPP !!!!!!
ça fait des jours que je cherche :calim2:
Merci pour votre aide et bon week-end,
dh
27/02/2016, 12h48
Invité
Bonjour,
Code:

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:

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... :oops:

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

Code:

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

page non trouvée...
27/02/2016, 12h56
dhillig

:oops: je ne comprends pas :oops:
:oops:
28/02/2016, 19h22
dhillig

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

Code:

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

? Je bloque :(
Merci et bonne soirée,
dh
29/02/2016, 21h25
NoSmoking

Bonjour,

Citation:

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
29/02/2016, 22h25
dhillig

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 :weird:
Bonne soirée,
dh
29/02/2016, 23h23
dhillig

re_Bonsoir NoSmoking,
Je tente de comprendre... en vain :calim2:
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
01/03/2016, 15h14
zadoner33
Je regarde ta page en ligne et un truc que tu ne sembles pas avoir changé/compris :
Dans ton script tu as écris :
Code:

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:

1 2 3 4 $(window).load(function(){ $("#menu-sticky-wrapper").sticky({ topSpacing: 0 }); });
01/03/2016, 16h10
dhillig

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 :calim2:
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 :roll:
Merci pour votre aide et bon après-midi,
dh
01/03/2016, 17h30
Invité
Bonjour,

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

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

1 2 3 $(window).load(function(){ $("#menu-sticky-wrapper").sticky({ topSpacing: 0 }); });
2/ Et tu as DEUX FOIS le même script !
Code:

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:

1 2 3 4 5 html, body { ... overflow-x: hidden; ... }
supprime cet overflow, et le menu devient sticky... 8O

N.B. Autre ligne qui me semble douteuse :

Code:

@import url("file:///Sans titre/Users/davehillig/webfonts/holtwoodonesc/stylesheet.css");
01/03/2016, 22h23
dhillig

Rhôôôôôô LA VACHE !!!

Bonsoir MONSIEUR jreaux62,
:ptdr:
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. :weird: )
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) :oops:.
Mais alors là, pour les CSS : BRAVO :ptdr:
Ç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 !!!:ptdr:
Merci pour tout et bonne soirée :zoubi:
dh
NB : et merci d'avoir jeté un œil sur le code :zoubi: