Question

我在导航栏中遇到了一些问题，但无法找到错误。我已使导航栏透明但无法使其粘滞。如果你建议我，那对我来说真的很好。

这是我的Navbar

<div class="navbar navbar-inverse-blue navbar">
<!--<div class="navbar navbar-inverse-blue navbar-fixed-top">-->
  <div class="navbar-inner">
    <div class="container">
       <div class="navigation">
         <nav id="colorNav">
           <ul>
            <li class="green">
                <a href="#" class="icon-home"></a>
                <ul>
                    <li><a href="login.html">Login</a></li>
                    <li><a href="register.html">Register</a></li>
                    <li><a href="index.html">Logout</a></li>
                </ul>
            </li>
           </ul>
         </nav>
       </div>
       <a class="brand" href="<?php echo esc_url(home_url('/')); ?>"><img src="<?php header_image(); ?>" alt="logo"></a>
       <div class="pull-right">
        <nav class="navbar nav_bottom" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header nav_2">
          <button type="button" class="navbar-toggle collapsed navbar-toggle1" data-toggle="collapse" data-target="#bs-megadropdown-tabs">Menu
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"></a>
       </div> 
       <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-megadropdown-tabs">


            <?php
        wp_nav_menu( array(
            'menu'              => 'primary',
            'theme_location'    => 'primary',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'collapse navbar-collapse',
            'container_id'      => 'bs-example-navbar-collapse-1',
            'menu_class'        => 'nav navbar-nav nav_1',
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker())
        );
    ?>
         </div><!-- /.navbar-collapse -->
        </nav>
       </div> <!-- end pull-right -->
      <div class="clearfix"> </div>
    </div> <!-- end container -->
  </div> <!-- end navbar-inner -->
</div>

这是我的CSS

.navbar-inverse-blue .navbar-inner {
  padding: 7px 0;
  background: rgba(0, 0, 0, 0.1);
  border: none;
  font-size: 0.85em;
  position: absolute;
  z-index: 9999;
  width: 100%;
}

.fixed {
  position: fixed; 
  top: 0; 
  height: 70px; 
  z-index: 9999;
}

.navbar {
  min-height: 100%;
  margin-bottom: 0;
  border: none;
}

这是我的剧本

<script>
   $(document).ready(function(){
       $(window).bind('scroll', function() {
       var navHeight = $( window ).height() - 70;
             if ($(window).scrollTop() > navHeight) {
                 $('navbar').addClass('fixed');
             }
             else {
                 $('navbar').removeClass('fixed');
             }
        });
    });
</script>

Answer 1

@Dipankar Das，你忘了在你的班级导航栏上加点。请参阅下面的代码。

这

<script>
   $(document).ready(function(){
       $(window).bind('scroll', function() {
       var navHeight = $( window ).height() - 70;
             if ($(window).scrollTop() > navHeight) {
                 $('navbar').addClass('fixed');
             }
             else {
                 $('navbar').removeClass('fixed');
             }
        });
    });
</script>

到

<script>
   $(document).ready(function(){
       $(window).bind('scroll', function() {
       var navHeight = $( window ).height() - 70;
             if ($(window).scrollTop() > navHeight) {
                 $('.navbar').addClass('fixed');
             }
             else {
                 $('.navbar').removeClass('fixed');
             }
        });
    });
</script>

Sticky Navbar问题

1 个答案: