在隐藏滚动的引导导航栏顶部堆叠div

时间:2015-02-11 06:25:30

标签: javascript jquery html css twitter-bootstrap

我正在为一个网站使用bootstrap而我正在尝试创建一个div,它将位于未滚动网站上的导航栏上方但是当我开始滚动时它会消失并且导航栏将填满该位置。

我使用它“工作”:

HTML

<div class="container">
    <div class="row">
        <div class="hidden-xs col-md-offset-8 col-sm-offset-8" style="padding:2px 0 3px 0;">
            <span class="btcall">Call for a free quote call - <span class="badge"><i class="glyphicon glyphicon-earphone"></i> 1300 123 456</span>
        </div>
    </div>
</div>
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
etc etc

的JavaScript

$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('shrink');
  } else {
    $('nav').removeClass('shrink');
  }
});

CSS

.navbar-fixed-top {
     top:25px;
 }

nav a {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  font-size: 16px;
}

nav .navbar-toggle {
  margin: 13px 15px 13px 0;
}

.navbar-brand {
  font-size: 30px !important;
  margin-top:-15px;
}

.navbar-fixed-top.shrink {
    top:0px;
}

 nav.navbar.shrink {
  min-height: 35px;
}

nav.shrink a {
  padding-top: 15px !important;
  padding-bottom: 10px !important;
  font-size: 14px;
}

nav.shrink .navbar-brand {
  font-size: 20px !important;
  margin-top:0;
}

这不理想,我觉得它可以做得更聪明,但我不确定如何。基本上我喜欢它固定到导航并隐藏在滚动而不是卡在原地,只有当浏览器滚动到顶部时才会出现。

1 个答案:

答案 0 :(得分:0)

如果您的导航栏固定在窗口顶部,导航栏会随页面滚动,只有当用户滚动到页面顶部时,您才希望div显示在该栏上方,下面将工作

如果这不是您需要的,请更详细地解释ui,或者更好地创建一个jsfiddle

$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('.hideMe').fadeOut('slow');
  } else {
    $('.hideMe').fadeIn('slow');
  }
});
.floatMenu {
    position:fixed;
    top:0;
    left:0;
    width:100%;
}

/* below this line is only for my made up example navigation*/

li {
    display: inline;
}
.pre-container{
  background-color:#cccccc;
}

.hideMe{
  background-color:#999999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pre-container floatMenu">
<div class="container hideMe">
  <div class="row">
    <div class="hidden-xs col-md-offset-8 col-sm-offset-8" style="padding:2px 0 3px 0;"> 
      <span class="btcall">Call for a free quote call - </span>
      <span class="badge"><i class="glyphicon glyphicon-earphone"></i> 1300 123 456</span> 
    </div>
  </div>
</div>
<nav  class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
  <!--im making up a menu for my example-->
  <ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>
  </nav>
</div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>