• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Isocèle Web Design

Création de sites Web

  • Fr
  • Esp
  • Clients
  • Présentation
  • DEVIS
  • Contact

Header coulissant avec Headroom

23 janvier 2020 by

Un Header, un logo ou le menu (au choix !) qui disparait au scroll vers le bas et ré-apparait au scroll vers le haut, libérant ainsi de la place tout en étant toujours dispo !

Afin de libérer de la place pour le contenu, tout en ayant logo et menu (soit le Header) toujours disponible, nous allons utiliser le script Headroom.

Avec Headroom, le Header apparait au scroll vers le haut et disparait au scroll vers le bas.

Installer Headroom.js

Dans l’arborescence du thème enfant, créer un Dossier /js/ s’il n’existe pas déjà.

Uploader le fichier headroom.js

Dans le fichier headroom.js, à la fin du code, vérifier votre sélecteur ( à changer par exemple si vous souhaitez faire disparaitre uniquement le menu et pas le logo etc.)

// grab an element
var myElement = document.querySelector("header"); // ICI LE HEADER PEUT ETRE MODIFIE SELON L'ELEMENT QUE L'ON VEUT VISER

// construct an instance of Headroom, passing the element
var headroom  = new Headroom(myElement);
// initialise
headroom.init();

On doit ajouter la fonction pour headroom dans le fichier functions.php du thème :

/* Support pour headroom.js*/

add_action( 'wp_enqueue_scripts', 'headroom_enqueue_script' );
function headroom_enqueue_script() {
    wp_enqueue_script( 'follow', get_stylesheet_directory_uri() . '/js/headroom.js', array( 'jquery' ), '', true );
}

Et voilà, maintenant allons dans le fichier CSS pour donner de l’allure à tout ça :

/*Headroom*/
.headroom {
    position: fixed;
    width: 100%;
    z-index: 999;
    padding-bottom: 2px;
    padding-top: 2px;
}

.headroom--pinned {
    display: block;
      background-color: white;
  transition-property: transform;
transition-duration: 0.30s;
  transition-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
 -webkit-transition: all 0.30s ease-in-out;
    transition-delay: 0.20s;}

.headroom--unpinned {
    display: block;
transition: transform 0.30s cubic-bezier(0.33, 0.66, 0.66, 1);
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
-webkit-transition: all 0.30s ease-in-out;
   transition-delay: 0.20s;
}

Cliquez ici pour télécharger le widget headroom.js


  • Header coulissant avec Headroom

  • Page d’Archives avec répartition selon la taxonomie

  • Afficher un Champ personnalisé via un Shortcode

  • 7 Plugins Gratuits Indispensables

  • Hébergement Web : les requis pour WordPress

  • Custom Post Archive avec Custom Taxonomy et Custom Fields

  • Afficher une taxonomie personnalisée via un shortcode

  • Les bases pour améliorer le positionnement / Search Engine Optimization

  • Avez-vous vraiment besoin d’acheter un Thème ?

Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Pin on Pinterest
Pinterest
Share on Tumblr
Tumblr
Email this to someone
email

Filed Under: Avancé, Tutoriel Tagged With: headroom, js, php, script

Footer

Isocèle Web Design

Rue Mathis
75019 Paris
FRANCE

Carrer Torrent de l'Olla
08012 Barcelona
ESPAÑA

isocele.webdesign@gmail.com

Liens

Tutoriels

Politique de confidentialité

Réseaux sociaux

Suivez-nous sur...

Partagez sur...

Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Pin on Pinterest
Pinterest
Share on Tumblr
Tumblr
Email this to someone
email

Copyright © 2021 · Genesis Sample Theme on Genesis Framework · WordPress · Log in