2015-02-11 109 views
0

我使用的是一个网站的引导程序,我正在尝试创建一个div,它将位于未滚动的网站上的导航栏上方,但是当我开始滚动时它将消失和导航栏将填补现场。堆栈上滚动的隐藏导航栏的div ontop

我有它的 “工作” 用这样的:

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; 
} 

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

+0

你不喜欢那你当前的脚本?你介意进一步解释一下吗? – seanlevan 2015-02-11 06:31:31

+0

你能为此创建一个小提琴吗? – 2015-02-11 06:43:24

回答

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>

+0

我把你的代码的一部分,然后重新排列我的代码的DIV,并得到它的工作,所以谢谢:) – avocadowarrior 2015-02-11 08:02:32