固定滚动导航 [英] Fixed Navigation on Scroll
问题描述
我想将导航和子导航包装在一个div中,一旦用户滚动到顶部上方,该div将变得固定.我正在使用_s入门主题.我的主题叫测试.
I want to wrap my navigation and sub navigation in a div that becomes fixed once the user scrolls past the top. I'm using _s starter theme. My theme is called test.
这是我的导航代码以及包装程序(我没有subnav,因为我想先弄清楚它):
Here is my nav code along with the wrapper (I don't have the subnav in, since I'm trying to figure this out first):
<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:
Here's my 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' );
这是我的固定导航文件:
And here's my fixed-navigation file:
( 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');
}
});
});
如果有人可以指出我做错了什么.它只是不断滚动而不固定.
If someone could please point out what I've done wrong. It simply keeps scrolling and doesn't become fixed.
我正在使用此
http://jsfiddle.net/CriddleCraddle/Wj9dD/
推荐答案
所以我不是100%地确定我了解您想要什么,或者什么不适合您.但是,如果您希望nav_bar
在向下滚动时保持在顶部,则可以使用该功能.
So I'm not 100% sure I understand what you want, or what is not working for you. But if you want the nav_bar
to keep in place at the top as you scroll down you have that working..
您要nav_bar
从顶部开始吗?
这是一个示例,我更改了html以使其更清楚地显示正在发生的事情.
Here is an example I changed the html to make it more obvious what was going on.
<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>
这篇关于固定滚动导航的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!