Discussion :

[dhillig]

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é]

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

[dhillig]

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é]

.../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]

Ç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]

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