如何让导航栏出现在页面scrollTop,JQuery和&引导

时间:2016-01-05 03:23:12

标签: jquery css twitter-bootstrap meteor scrolltop

我希望在滚动到页面的某个部分时出现隐藏的导航栏。我在这里遇到的问题是我想要实现的目标。我查了很多例子,但我不知道还能做些什么。谁能帮我?谢谢,麻烦您了。

HTML

<nav id="menu" class="navbar navbar-danger" role="navigation">
    <div class="container-fluid">

        <div class="collapse navbar-collapse col-lg-6 col-md-6">
            <ul class="nav navbar-nav  navbar-left">
                <a class="navbar-brand" href="#">Brand</a>
            </ul>
        </div>

        <div class="collapse navbar-collapse navbar-right col-lg-6 col-md-6">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">{{> loginButtons}}</a></li>
            </ul>
        </div>
 </nav>

CSS

#menu{
position: fixed;
top: 0px;
width: 100%;
height:75px;
background-color: #DDDDDD;
color: #FFFFFF;
z-index: 9999;
display: none
}

JQuery的

Template.menu.onRendered(function () {
$("#menu").hide();
$(window).scroll(function() {
if ( $(window).scrollTop() > 350 ) {

$("#menu").fadeIn();
}
else{
  $("#menu").fadeOut();
}
})
});

0 个答案:

没有答案