WordPress + BootStrap标头粘

Question

I am trying to make a duel header, which will stick when the user scrolls down.

Currently, I have the header sticking to the top, like so:

What I am trying to achieve, is another header above this header, which will NOT stick, but the logo from the header above will be used in the sticky header.

An example I found on themeforest could be like this one:

http://uranus.icotheme.com/

I am currently using bootstrap, and my current header code is:

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

any help could be appreciated.

Answer 1

This bootply might help you get started. The JS code is taken from another stackoverflow post

Answer 2

you can try this:-

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

Hope it will helps you.

Answer 3

this is your problem solution hear.... just try it

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>