您的位置：首页 > 其它

仿淘宝右侧导航栏显示隐藏

2016-10-21 11:54 253 查看

<!DOCTYPE html>
<html>
<head>
<title>scale</title>
<style type="text/css">
div{
max-height:600px;
transition: all .4s linear 0s;
-webkit-transform: scale(.01,.01);
visibility: hidden;
z-index: 99;
position:fixed;
left:50%;
margin-left:500px;
bottom:60px;
width:150px;
height:250px;
border:1px solid #bd00ff;
background-color: #bd00ff;
}
.show_div{
visibility: visible;
-webkit-transform: scale(1,1);
}
</style>
</head>
<body>
<p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</<
4000
span class="hljs-title">p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
<div class="left_div"></div>

<script type="text/javascript" src='http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js'></script>
<script type="text/javascript">
$(function() {
var tTop = $(window).scrollTop();
var top_distant = $(".left_div").offset().top;
$(window).on('scroll',function() {
//滑动大于200px的情况下，展示出来
if ($(this).scrollTop() > 200) {
$(".left_div").addClass("show_div");
}else {
$(".left_div").removeClass("show_div");
}
});
});
</script>
</body>
</html>

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

标签： 淘宝网导航

相关文章推荐

新的分享

章节导航