添加品牌標誌，當導航欄固定在滾動頂部

<div class="container" id="menubar_1"> 
       <nav class="navbar navbar-inverse" id="menubar_1"> 
        <!-- Brand and toggle get grouped for better mobile display --> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
         data-target="#main_menu" aria-expanded="false"> 
         <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="#"><img src="assets/images/logo.png" alt="logo" /></a> 
        </div> 

        <!-- Collect the nav links, forms, and other content for toggling --> 
        <div class="collapse navbar-collapse" id="main_menu"> 
         <ul class="nav navbar-nav menu_bar text-uppercase"> 
         <li class="active"><a href="#">adfadad</a></li> 
         <li><a href="#">adfafaf</a></li> 
         <li><a href="#">adadfa</a></li> 
         <li><a href="#">ada</a></li> 
         <li class="contact_us"><a href="#">adfadfadf</a></li> 
         </ul> 
        </div><!-- /.navbar-collapse --> 
       </nav> 
      </div>

通常導航欄在集裝箱不barnd，標誌和李的最後child.i想要的結果時，導航欄滾動到頂部容器類將刪除和李navbar品牌，李的最後一個孩子將被添加到導航欄中。我會嘗試下面給出的這個js。添加品牌標誌，當導航欄固定在滾動頂部

var distance = $('#menubar_1').offset().top; 

    $(window).scroll(function() { 

     if ($(window).scrollTop() >= distance) { 
      $('#menubar_1').addClass("fixed_top"); 
      $('#menubar_1').removeClass("container"); 
      $('#menubar_1').addClass("navbar-brand"); 
      $('#menubar_1').addClass("contact_us"); 
     } else { 
      $('#menubar_1').removeClass("fixed_top"); 
      $('#menubar_1').addClass("container"); 
      $('#menubar_1').removeClass("navbar-brand"); 
      $('#menubar_1').removeClass("contact_us"); 
     } 
    });

然後固定頂部的CSS是在這裏：

.fixed_top { 
    width: 100%; 
    height: 50px; 
    top: 0px; 
    position: fixed; 
    overflow: visible!important; 
    z-index: 9998; 
    background: #fff; 
    padding-top:15px; 
    padding-bottom: 15px; 
}

請幫助我的腳本

來源

2015-07-03 TM Dinesh

我終於得到了答案

<script> 
     var distance = $('#menubar_1').offset().top; 

     $(window).scroll(function() { 

      if ($(window).scrollTop() >= distance) { 
       $('#menubar_1').addClass("navbar-fixed-top"); 
       $('#menubar_1').removeClass("container"); 
       $('.navbar-brand').css("float" , "none"); 
       $('.navbar-brand').css("display" , "block"); 
       $('.contact_us').css("display" , "block"); 
      } else { 
       $('#menubar_1').removeClass("navbar-fixed-top"); 
       $('#menubar_1').addClass("container"); 
       $('.navbar-brand').css("display" , "none"); 
       $('.contact_us').css("display" , "none"); 
      } 
     }); 
    </script>

來源

2015-07-06 04:21:59

添加品牌標誌，當導航欄固定在滾動頂部

回答

相關問題