点击导航下的某个栏目，出现在相应区域；滚动到某个区域，导航下的某个栏目相应效果
2016-02-24 18:45
696 查看
今天开发遇到了这个效果，这里小结下
<!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 () {
//change($(this).index());
var _index=$(this).index();
$('html body').animate({
scrollTop:arr[_index]-70,
complete:function () {
}
});
/*$('ul').css({position:'fixed',top:'0',left:'0'});
$('.blank').css('display','block');*/
})
var oNavScroll=$('ul').offset().top; //导航部分距离顶部的距离；
//鼠标滚动
$(window).scroll(function () {
var oScroll=$(this).scrollTop();//获取滚动距离
//滚动距离小于等于导航部分距离顶部的距离的时候， 导航部分回到原来的位置，'.blank'隐藏。
if (oScroll<=oNavScroll) {
$('ul').css({position:'relative',top:'0',left:'0'});
$('.blank').css('display','none');
}else{
//滚动距离 大于等于 导航部分距离顶部的距离的时候， 导航部分始终定位在网页的位置，'.blank'显示。
$('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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 