我正在尝试创建一个决斗标头，当用户向下滚动时该标头会停留。
目前，我的标题贴在顶部，如下所示：
我想要实现的是此标头上方的另一个标头，它不会粘住，但上面标头中的徽标将用于粘贴标头中。
我在themeforest上发现的一个示例可能是这样的：
http://uranus.icotheme.com/
我目前正在使用引导程序，当前的标头代码为：
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<div class="col-md-1 col-sm-1 col-xs-1">
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="" width="56" height="52"/>
</a>
</div>
<div class="col-md-11 col-sm-11 col-xs-11">
<div id="main-nav">
<?php wp_nav_menu(array('theme_location' => 'main_nav', 'container' => '', 'exclude' => '31')); ?>
</div></div>
</div>
</div>
</nav>
任何帮助，不胜感激。
最佳答案
这是您解决问题的方法。
LIVE DEMO
jQuery(window).scroll(function ()
{
if (jQuery(window).scrollTop() > 5) {
jQuery('.top-header').slideUp( "slow" );
}
else{
jQuery('.top-header').slideDown( "slow" );
}
});p{
padding:30px 00px;
}
.top-header{
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="top-header">Top Header</div>
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Project name</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a aria-expanded="false" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <span class="caret"></span></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<p>test</p>
<p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>