web-dev-qa-db-ja.com

Twenty Twelveテーマのメニュークラスに固定位置を追加するにはどうすればいいですか？

私はメニューをスティッキーにする方法に関するjqueryの例をたくさん見てきました。私はきれいなHTMLページにこれらのチュートリアルを適用しました、そして、彼らは完全に働きました。しかし、Twenty Twelveテーマに適用しようとしても、何も起こりません。 fixed属性はメニュークラスに追加されません。

これはCSSです：

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

これが私のメニューです。

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

これは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();
});
});

私は何かが足りないのですか？

menusjquery
1
Gixty

私はそれを機能させる方法を見つけました。

<?php wp_enqueue_script('jquery'); ?>の前に<?php wp_head(); ?>を、次にjqueryコードを置く必要がありました。

もっと良い、きれいな方法があれば、教えてください。

1
Gixty