Navbar返回顶部后返回原始css

时间:2017-05-23 19:36:38

标签: javascript jquery html css twitter-bootstrap

当我滚动回到页面顶部时,我的导航栏返回到原始样式时出现问题。我已经对我的CSS和jQuery进行了更改以解决这个问题。到目前为止,没有运气。

HTML

<nav id="nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="row">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button> 
      </div>
     <div class="collapse navbar-collapse col-md-12 pull-left" id="navigation">
       <ul class="nav navbar-nav">
         <li class="active" id="phone-number"><a href="tel:17777777777"><i class="glyphicon glyphicon-phone"></i> (777)777-7777</a></li>
         <li><a href="#overview">Overview</a></li>
         <li><a href="#about">about</a></li>
         <li><a href="#location">location</a></li>
       </ul>
      </div>
    </div>
  </div>
</nav>

CSS:

.navbar-default{
    color: white;
    background:transparent;
    border:none !important;
    box-shadow:none;
}

.navbar {
    text-decoration: none;
    font-size: 1.6em;
    border:none !important;

}

.nav {
    color:"black";
    background:transparent;
    font-size:10px;
}

.nav-collapse {
    color:"white";
    background:"#001529";

}

.navbar {
    padding: 3em;
}

.navbar-default .navbar-nav>li>a, #phone-number {
    color: #ffffff;
    font-family: montserrat;
    font-size: 16px;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #ffffff;
    background:transparent;
    box-shadow:none;
}

jQuery的:

// Navbar
$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#startchange');
   var offset = startchange.offset();
    if (startchange.length){
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $(".navbar-default").css('background-color', '#001529').css('color', 'white');
       } else {
          $('.nav').css('background-color', 'transparent');
       }
   });
    }
});

0 个答案:

没有答案