推特引导程序导航栏滚动阴影
Twitter bootstrap navbar shadow on scroll
我要做以下事情http://codepen.io/anon/pen/eIfdn用于Twitter引导程序导航栏。它只是在滚动时为导航栏添加一个阴影。任何建议都会很有帮助,谢谢。
.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;
}
这是我从上面修改并添加到js中的css。
这是我使用的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});
}
});
})
以下是一些入门方法:
http://jsfiddle.net/panchroma/pyYfG/
HTML
<div class="navbar" data-spy="affix">
<div class="navbar-inner">
.... standard navbar stuff ...
</div>
</div>
<div id="top-shadow"></div>
.... page content ...
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 */
}
重要的是,我使用词缀行为将导航栏锁定在原位,并将阴影应用于导航栏下方的新div。我认为这将更容易管理,尝试直接添加阴影到导航栏本身。
祝你好运!
相关文章:
- 幻灯片滚动javascript不起作用
- 将视口底部滚动到元素底部
- jQuery Lazy加载动画滚动
- 设置滑块分区上的滚动
- 结合jQuery和jetpack无限滚动
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- 滚动到容器中的下一个元素-几乎到了
- 只覆盖箭头键滚动事件
- 如何让标题在滚动“x”后获得框阴影
- Opera(11)中使用固定位置和文本阴影的慢速滚动
- 如何使菜单栏阴影更大时滚动
- 滚动条的阴影出现在顶部的叠加动画在Chrome和Safari
- Jquery html/css:在滚动时显示和消失的固定标题上创建下拉阴影
- Jquery字幕覆盖滚动时的阴影
- 如何在滚动时将jQuery阴影函数应用于具有相同类名的多个元素
- 滚动上的香草JS框阴影
- 推特引导程序导航栏滚动阴影
- 滚动时添加文本阴影(jquery或javascript)
- 如何动态更改滚动阴影
- 无限滚动[WordPress,起源主题,阴影框插件]