web-dev-qa-db-fra.com

Comment ajouter une position fixe dans le menu de classe pour le thème Twenty Twelve?

J'ai déjà regardé de nombreux exemples jQuery sur la façon de rendre le menu collant. J'ai appliqué ces tutoriels sur des pages html propres et ils ont parfaitement fonctionné. Cependant, lorsque j'essaie de l'appliquer au thème Twenty Twelve, rien ne se passe. L'attribut fixed ne sera pas ajouté à la classe de menu.

C'est le CSS:

.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}

Ceci est mon menu:

<nav id="site-navigation" class="main-navigation" role="navigation">
        <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
        <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->

C'est le JQUERY:

$(document).ready(function() {
var stickyNavTop = $('.main-navigation').offset().top;

var stickyNav = function(){
var scrollTop = $(window).scrollTop();

if (scrollTop > stickyNavTop) { 
    $('.main-navigation').addClass('sticky');
} else {
    $('.main-navigation').removeClass('sticky'); 
}
};

stickyNav();

$(window).scroll(function() {
    stickyNav();
});
});

Est-ce que je manque quelque chose?

menusjquery
1
Gixty

J'ai trouvé un moyen de le faire fonctionner.

Je devais mettre: <?php wp_enqueue_script('jquery'); ?> avant <?php wp_head(); ?>, puis le code jQuery.

S'il y a un moyen meilleur et propre, s'il vous plaît faites le moi savoir.

1
Gixty