老司机们，请全屏观看
滚动监听
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body{ font: 14px "微软雅黑";}
a{ text-decoration: none; color: #333333;}
.nav{ height: 60px; background-color: #3A7FF3; margin: 0 auto; width: 100%; transform:translateY(-10px); translate:0.5s ease-out;}
.nav-position{ position: fixed; top: 0; left: 0; z-index: 1; transform:translateY(0);}
.nav a{color: #ffffff;line-height: 60px; padding: 4px 15px; margin: 0 8px;}
.nav a:hover, .nav a.active{ background-color: #fff; color: #3A7FF3;}
.wrap:after{ content: " ";display: block;clear: both;height: 0;}
.wrap .wrap-bd{ width: 100%; float: left;}
.wrap h3{ font-size: 16px; color: #3A7FF3; border-left: 5px solid #3A7FF3; margin: 10px; padding-left: 5px;}
.wrap ul,li{list-style: none;}
.wrap ul{ padding: 0 0 0 8px;}
.wrap li{float: left;line-height: 1.68em;padding-bottom: 8px;width: 120px;margin: 15px 15px 0 0;text-align: center;}
.wrap li .imgs{width: 120px; height: 120px; position: relative; border-radius: 50%; overflow: hidden;}
.wrap li .bd{ width: 90px; height: 90px; padding: 15px; border-radius: 50%;}
.wrap li .bg{ width: 120px; height: 120px; position: absolute; left: 0; top: 0; z-index: -1;
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
.wrap li a:hover{color: #ff00ff;}
</style>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="nav">
<a href='javascript:void(0)'>金曲歌王</a>
<a href='javascript:void(0)'>魅力更趋</a>
<a href='javascript:void(0)'>最新更趋</a>
<a href='javascript:void(0)'>最火的</a>
</div>
<div class="wrap">
<div class="wrap-bd">
<h3>金曲歌王</h3>
<ul>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
</ul>
</div>
<div class="wrap-bd">
<h3>魅力更趋</h3>
<ul>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
</ul>
</div>
<div class="wrap-bd">
<h3>最新更趋</h3>
<ul>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
</ul>
</div>
<div class="wrap-bd">
<h3>最火的</h3>
<ul>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
<li>
<a href="javacript:void(0);">
<div class="imgs">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bg">
<img src="http://g.hiphotos.baidu.com/image/pic/item/574e9258d109b3de0a9edda0c8bf6c81810a4cd0.jpg" class="bd">
</div>
<p>相见不如怀念</p>
<p class="desc">相见不如怀念</p>
</a>
</li>
</ul>
</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<script type="text/javascript">
$(function() {
var wrapH3 = $(".wrap").find("h3");
var wrapTop = $(".wrap").offset().top;
_scroll();
$(".nav a").each(function(i,obj){
$(obj).attr("data-index",i);
});
$(".nav a").on("click",function(){
var h = wrapH3.eq($(this).attr("data-index")).offset().top - 70;
$("body,html").scrollTop(h);
})
$(window).on("scroll",function(){
_scroll();
})
function _scroll(){
var h = document.body.scrollTop || document.documentElement.scrollTop;
if(h>wrapTop){
$(".nav").addClass("nav-position");
}else{
$(".nav").removeClass("nav-position");
}
wrapH3.each(function(i,obj){
if( h < $(obj).offset().top){
$($(".nav a:eq("+i+")")).addClass("active").siblings().removeClass("active");
return false;
}
})
}
})
</script>
</body>
</html>
网友评论