[英]Twitter bootstrap navbar shadow on scroll
I'm look to do the following http://codepen.io/anon/pen/eIfdn for the Twitter bootstrap navbar. 我想为Twitter bootstrap导航栏做以下http://codepen.io/anon/pen/eIfdn 。 It simply adds a shadow to the navbar upon scrolling. 它只是在滚动时为导航栏添加阴影。 Any advice would be helpful thank you. 任何建议都会有所帮助,谢谢。
.navbar {
*position: relative;
top: 0;
left: 0;
width: 100%;
height: 80px;
z-index: 999;
-webkit-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
display: none;
*z-index: 2;
margin-bottom: 20px;
overflow: visible;
}
Thats the css I changed and I added in the js from above. 多数民众赞成我改变了,我在上面添加了js。
Here's the JS I used 这是我用过的JS
$(document).ready(function(){
$(window).scroll(function(){
var y = $(window).scrollTop();
if( y > 0 ){
$("#navbar").css({'display':'block', 'opacity':y/20});
} else {
$("#navbar").css({'display':'block', 'opacity':y/20});
}
});
})
Here is somenthing to get you started: 这里有一个让你入门的东西:
http://jsfiddle.net/panchroma/pyYfG/ http://jsfiddle.net/panchroma/pyYfG/
HTML HTML
<div class="navbar" data-spy="affix">
<div class="navbar-inner">
.... standard navbar stuff ...
</div>
</div>
<div id="top-shadow"></div>
.... page content ...
CSS CSS
#top-shadow {
position: fixed;
top: 0;
left: 20px;
width: 100%;
height: 42px;
z-index: 999;
-webkit-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
display: none;
}
.navbar.affix{ /* position fixed navbar */
top:0;
width:100%;
}
/* UPDATE BELOW */
.navbar{
z-index:1000; /* lift .navbar above #top-shadow */
}
The important bits are that I'm using the affix behaviour to lock the navbar inplace, and I'm applying the shadow to a new div just below the navbar. 重要的是我正在使用词缀行为将导航栏锁定到位,我将阴影应用到导航栏下方的新div。 I think this will be easier to manage that trying to add a shadow directly to the navbar itself. 我认为这将更容易管理,试图直接添加阴影到导航栏本身。
Good luck! 祝好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.