Validation site

Pour le headroom c'est relativement simple
tu charges le script headroom.js juste avant ton main.js
a la fin de ton main.js, tu initialises l'objet headroom

$(document).ready(function(){
    ...
    ...
    var myElement = document.querySelector("header");  // traite la balise header
    // construct an instance of Headroom, passing the element
    var headroom  = new Headroom(myElement);
    // initialise
    headroom.init({
            // vertical offset in px before element is first unpinned
            offset : 0,
            // scroll tolerance in px before state changes
            tolerance : 10,
            // or you can specify tolerance individually for up/down scroll
            tolerance : {
                up : 5,
                down : 0
            }
        }
    );
});

et il manque du css pour les transitions
à rajouter dans ton main.css

.headroom {
    will-change: transform;
    transition: transform 0.25s ease-in-out 0s;
}
.headroom--pinned {
    transform: translateY(0%);
}
.headroom--unpinned {
    transform: translateY(-100%);
}

Bonjour,

J'ai essayé ta solution mais mon menu est toujours pareil. J'ai téléchargé le headroom.js, j'ai un lien dans le head.

    <script type="text/javascript" src="js/headroom.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/main.js"></script>

J'ai ensuite inséré le code

$(document).ready(function(){
    ...
    ...
    var myElement = document.querySelector("header");  // traite la balise header
    // construct an instance of Headroom, passing the element
    var headroom  = new Headroom(myElement);
    // initialise
    headroom.init({
            // vertical offset in px before element is first unpinned
            offset : 0,
            // scroll tolerance in px before state changes
            tolerance : 10,
            // or you can specify tolerance individually for up/down scroll
            tolerance : {
                up : 5,
                down : 0
            }
        }
    );
});

à la fin de mon main.js et j'ai aussi ajouté ces lignes à mon css :

.headroom {
    will-change: transform;
    transition: transform 0.25s ease-in-out 0s;
}
.headroom--pinned {
    transform: translateY(0%);
}
.headroom--unpinned {
    transform: translateY(-100%);
}

Cela n'a aucun effet... Voici mon menu HTML :

<!--  début du header  -->
    <header>
        <div class="wrapper">
            <div class="logo">
                <a href=""><img src="img/logo.png" alt="Resto" title=""/></a>
            </div>
            <p>Restaurant Pizzéria Le Chaudron</p>
            <nav id="primary_nav">
                <ul>
                    <li><a href="#1">Un</a></li>
                    <li><a href="#2">Deux</a></li>
                    <li><a href="#3">Trois</a></li>
                    <li><a href="#4">Quatre</a></li>
                    <li><a href="5.html">Cinq</a></li>
                    <li><a href="6.html">Six</a></li>
                </ul>
            </nav>
        </div>
        <script language="JavaScript">
        $(function() {
            $('#nav-status').click(function(e) {
                e.preventDefault();
                $('#navigation').toggle();
            });​
        });
        </script>
    </header><!--  Fin du header  -->

Et le CSS de mon menu :

/*    header    */
header{
    width: 100%;
    height: 140px;
    position: fixed;
    z-index: 2; 
    background: #000;
    overflow: hidden;
}

header .logo{
    float: left;
    margin-top: 1px;
    overflow:hidden;
    -webkit-border-radius:50px;
    -moz-border-radius: 50%;
    border-radius:50px;
    width:85px;
    height:85px;
    border: 2px solid #000;
}

header .logo:hover,
header .logo:focus {
    transform: rotate(360deg);
    transition: all 0.7s;
    -moz-box-shadow: 0px 0px 10px #343434;
    -webkit-box-shadow: 0px 0px 10px #343434;
    -o-box-shadow: 0px 0px 10px #343434;
    box-shadow: 0px 0px 10px #343434;
}

header p{
    text-decoration: none;
    color: #39CF85;
    font-family: "wcmanonegrabta";
    font-size: 2em;
    letter-spacing: .5px;
    text-align: center;
    margin: 1.3em 10px 1px 60px;    
}

header p:hover,
header p:focus{
    transform: scale(1.05);
}

header nav{
    /*float: left;*/
    /*padding : 0 0.5em;*/
    margin: 0.1em 10px 10px 11em;
}

header nav ul{
    list-style: none;
    margin-top: 20px;
    text-align:center;
}

header nav ul li{
    display: block;
    float: left;
    margin-left: 50px;
}

header nav ul li a{
    text-decoration: none;
    color: #39CF85;
    font-family: "aleo-regular", arial;
    font-size: 20px;
    letter-spacing: .5px;
    padding-bottom: 10px;
    border-bottom: 2px solid #39CF85;
}

header nav ul li a.active,
header nav ul li a:hover{
    color: #f34949;
    border-bottom: 2px solid #f34949;
}

header nav ul li a:target{
    padding-top: 140px;
}

Vérifie que le script headroom est bien chargé et que tu n'as pas d'erreur javascript
Met en ligne tes modif si tu veux qu'on jette un oeil

PS : j'ai recopié ta page en local et ça fonctionne tel que je te l'ai indiqué

Je viens de vérifier avec firebug : Mon script headroom est bien chargé et je n'ai pas d'erreurs... Je met mes dernières modifs en ligne sur http://chaudron.lechaudroncrevin.fr/index.html.

Salut, sur la version que tu as publiée, il y a des erreurs qui sont remontées par la console.

Ah oui, effectivement, je me suis trompé de version :D

Je viens de mettre à jour ma version !

Dans le main.js tu as laissé les "..." et du coup ça fait des erreur js
j'avais mis ça pour te dire de rajouter l'initialisation à la fin du bloc document.ready(
donc pas la peine de rajouter un second bloc document.ready

Je te conseille de revoir le code de ton main.js car des erreurs de syntaxe sont encore remontées.

C'est bon, ça marche sur la page principale mais pas sur les deuxx autres (photo et contact...). J'ai pourtant bien inséré le headroom.js avant le main.js.

Il te manque le lien vers ton script headroom.js sur ces deux pages

Non, il est bien présent !

Autant pour moi. Parcontre, déclare le lien vers jQuery. ça pourrait résoudre ton problème.

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

Le lien vers jQuery est là aussi !

Je vais maintenant voir pour intégrer un menu responsive comme ça : https://www.grafikart.fr/tutoriels/html-css/menu-hamburger-responsive-512.

Je n'arrive toujours pas à faire fonctionner le headroom.js sur mes deux autres pages. J'essaye maintenant de faire un menu pour les mobiles avec le lien ci-dessus. J'ai bien créer mes divs, mais le "position: absolute;" du menu m'affiche une page complètement blanche...

C'est parce que tu charges 2x jQuery, une fois en début de page (V 1.11) et une seconde fois après le body (V 2.1.3)
en mettant en commentaire la seconde, le headroom fonctionne

Cela ne marche pas sur la page contact... Si je supprime le deuxième jquery, il me supprime ma carte...

Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
dB.j @ util.js:212
(anonymous) @ js?sensor=true:127
(anonymous) @ js?sensor=true:46
(anonymous) @ js?sensor=true:43
(anonymous) @ js?sensor=true:46
(anonymous) @ js?sensor=true:99
(anonymous) @ js?sensor=true:43
(anonymous) @ js?sensor=true:99
(anonymous) @ js?sensor=true:43
(anonymous) @ js?sensor=true:99
(anonymous) @ js?sensor=true:43
(anonymous) @ js?sensor=true:99
gc @ js?sensor=true:45
fc.cb @ js?sensor=true:99
(anonymous) @ common.js:1
util.js:212 Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required

Il ne t'affiches pas ta carte peut-être à cause de cela. Les erreurs sont remontées par la console. Penses bien à vérifier avant :)

Les erreurs ont disparus (comme ma carte...) !