WordPress + BootStrap header 置顶

Question

我正在尝试进行决斗 header，当用户向下滚动时它会卡住。

目前，我将 header 固定在顶部，如下所示：

我想要实现的是在这个 header 上方的另一个 header，它不会粘贴，但上面 header 的徽标将用于粘性 header.

我在 themeforest 上找到的一个例子可能是这样的：

http://uranus.icotheme.com/

我目前正在使用 bootstrap，我目前的 header 代码是：

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

如有任何帮助，我们将不胜感激。

Answer 1

这个bootply might help you get started. The JS code is taken from another Whosebugpost

Answer 2

你可以试试这个：-

$(window).scroll(function() {


 if ($(this).scrollTop() > 1){  
    $('nav').addClass("sticky");
}
else{
    $('nav').removeClass("sticky");
}
 if ($(this).scrollTop() > 1){ 
     $('header').css("display", "none");
 }

else{
  $('header').css("display", "block");
}
});

header{
            text-align: center;
            line-height: 60px;
             font-size: 24px;
            height: 70px;
            background: #ccc;
            color: #333;
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }
        nav{
            height: 30px;
            background: #333;
            text-align: center;
            color:#fff;
        }
        nav.sticky{
            width: 100%;
            position: fixed;
            top:0px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header> Header</header>
<nav> Navigation</nav>

<div>
Other content<br/>
  Other content<br/>
  Other content<br/>
  Other content<br/>
  Other content<br/>
  Other content<br/>
  Other content<br/>
  Other content<br/>
  Other content<br/>
  Other content<br/>
  Other content<br/>
    Other content<br/>
  Other content<br/>
  Other content<br/>
  Other content<br/>
  Other content<br/>
  Other content<br/>
  Other content<br/>
  Other content<br/>
  Other content<br/>
  Other content<br/>
  
</div>

希望对您有所帮助。

Answer 3

这是你的问题解决方案，听...试试吧

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>

WordPress + BootStrap header 置顶

WordPress + BootStrap header sticky

html

css

navigation

wordpress

twitter-bootstrap