1

ユーザーが上部をスクロールすると固定される div で、ナビゲーションとサブ ナビゲーションをラップしたいと考えています。_s スターター テーマを使用しています。私のテーマはテストと呼ばれています。

これがラッパーと一緒の私のナビコードです（最初にこれを理解しようとしているので、サブナビはありません）：

<div id='fixed-nav'>
    <nav id="site-navigation" class="main-navigation" role="navigation">
        <h1 class="menu-toggle"><?php _e( 'Menu', 'test' ); ?></h1>
        <div class="skip-link"><a class="screen-reader-text" href="#content"><?php _e( 'Skip to content', 'test' ); ?></a></div>

        <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    </nav><!-- #site-navigation -->

これが私のcssです：

#fixed-nav {
border: 0;
background-color: #202020;
border-radius: 0px;
margin-bottom: 0;
height: 30px;
}
 .navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}

ここに私のfunction.phpがあります：

function test_fixed_navigation() {
wp_enqueue_script( 'fixed-navigation', get_template_directory_uri() . '/js/fixed- navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'test_fixed_navigation' );

そして、ここに私の固定ナビゲーションファイルがあります:

( function() {
$(document).ready(function() {
$(window).scroll(function () {
  //if you hard code, then use console
  //.log to determine when you want the 
  //nav bar to stick.  
  console.log($(window).scrollTop())
if ($(window).scrollTop() > 280) {
  $('#fixed-nav').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
  $('#fixed-nav').removeClass('navbar-fixed');
}
});
});

誰かが私が間違ったことを指摘してください。それは単にスクロールし続け、固定されません。

編集：私はこれを使用しています：

http://jsfiddle.net/CriddleCradle/Wj9dD/

4

1 に答える 1

1

したがって、あなたが何を望んでいるのか、または何がうまくいかないのかを 100% 理解しているとは言えません。しかし、nav_bar下にスクロールしても上部に固定したい場合は、それが機能しています..

nav_barを一番上から始めたいですか？

これは、何が起こっているのかをより明確にするためにhtmlを変更した例です。

<div id="banner">
 <h2>put what you want here</h2>
 <p>just adjust javascript size to match this window</p>
</div>

<nav id='nav_bar'>
<ul class='nav_links'>
  <li><a href="url">Nav Bar</a></li>
  <li><a href="url">Sign In</a></li>
  <li><a href="url">Blog</a></li>
  <li><a href="url">About</a></li>
</ul>
</nav>
<div id='body_div'>
  <p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here  </p>
  <br>
  <br>
  <br>
  <br>
  <p>more stuff</p>
  <br>
  <br>
  <br>
  <br>
  <p>and more..</p>
</div>

http://jsfiddle.net/Wj9dD/13/

于 2013-10-11T22:35:06.280 に答える