您的位置：首页 > Web前端 > JQuery

jQuery实现页面滚动时顶部动态显示隐藏

2017-11-07 11:43 423 查看

很多时候你会看到页面上有一个始终固定在网页顶部的导航菜单，当页面向下滚动的时候，导航菜单动态隐藏，页面滚动到顶部时，导航菜单动态显示，淘宝也采用过此效果，很不错，当然，里面使用了CSS3动画效果，不支持低版本浏览器。代码相当的简单，只需几行就搞定。

<div class="nav-top"></div>

<style>
.nav-top{
background: #f7f7f7;
color:white;
font-size:24px;
padding:30px;
text-align:center;
position:fixed;left:0;top:-93px;
width:100%;
z-index: 1;
transition: top .5s;
border-bottom: 1px solid #dadada;
box-shadow: 0 2px 4px rgba(0,0,0,.04);
}
</style>

<script>
$(window).scroll(function(){
let winHeight = $(window).scrollTop();
if(winHeight>100){
$(".nav-top").animate({
top:'0px'
},5)
}else{
$(".nav-top").animate({
top:'-93px'
},5)
}
})
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery css3 导航

相关文章推荐

新的分享

章节导航