<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>js特效|常用效果:点击导航下的某个栏目,出现在相应区域;滚动到某个区域,导航下的某个栏目相应效果</title>
<style>
*{margin: 0; padding: 0;}
li{ list-style: none;}
.clearfix:after{display: block; clear: both; content: '';}
.clearfix{zoom: 1;}
ul{ height: 50px; margin-top: 10px;}
section{ height: 200px; background: #CCCCCC;}
.blank{ height: 50px; margin-top: 10px; display: none; background: #red;}
li{float: left; width: 50px; height: 50px; text-align: center; line-height: 50px; background: #E3E3E3; margin-right: 10px; }
.action{ background: #FFA500;}
div{ width: 100%; height: 600px; font-size: 100px; background: #5690D2; margin: 10px 0; }
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<section></section>
<ul class="clearfix">
<li class="first">1</li>
<li class="second">2</li>
<li class="third">3</li>
<li class="four">4</li>
</ul>
<p class="blank"></p>
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>
<div id="four">4</div>
<article></article>
</body>
<script>
var oFirst=$('#first').offset().top;
var oSecond=$('#second').offset().top;
var oThird=$('#third').offset().top;
var oFour=$('#four').offset().top;
var arr=[oFirst,oSecond,oThird,oFour];
$('li').click(function () {
var _index=$(this).index();
$('html body').animate({
scrollTop:arr[_index]-70,
complete:function () {
}
});
})
var oNavScroll=$('ul').offset().top;
$(window).scroll(function () {
var oScroll=$(this).scrollTop();
if (oScroll<=oNavScroll) {
$('ul').css({position:'relative',top:'0',left:'0'});
$('.blank').css('display','none');
}else{
$('ul').css({position:'fixed',top:'0',left:'0'});
$('.blank').css('display','block');
}
if (oScroll>=oFour-80) {
change(3);
}else if(oScroll>=oThird-80){
change(2);
}else if(oScroll>=oSecond-80){
change(1);
}else if(oScroll>=oFirst-80){
change(0);
}
});
function change(index){
if ($('ul li').hasClass('action')) {
$('ul li').removeClass('action');
}
$('ul li').eq(index).addClass('action');
}
</script>
</html>