本文主要讲解如何将导航固定在屏幕上,以及切换到页面不同位置
(示例代码为引用他人的,非本人原创)
首先在html中设置好菜单选项及相对应的栏目:
<div id="loutinav">
<ul>
<li class="active"><span>享品质</span> </li>
<li><span>服饰美妆</span> </li>
<li><span>电脑数码</span> </li>
<li><span>3C运动</span> </li>
<li><span>爱吃</span> </li>
<li><span>母婴居家</span> </li>
<li><span>图书汽车</span> </li>
<li><span>虚拟</span> </li>
<li><span>还没逛够</span> </li>
<li class="last">顶部</li>
</ul>
</div>
<!--楼层内容开始-->
<div id="header">
向下滚动鼠标查看效果
</div>
<div id="main">
<div class="louti" style="background: #cc0033;">
享品质
</div>
<div class="louti" style="background: #999933;">
服饰美妆
</div>
<div class="louti" style="background: #ccff33;">
电脑数码
</div>
<div class="louti" style="background: #006633;">
3C运动
</div>
<div class="louti" style="background: #6666cc;">
爱吃
</div>
<div class="louti" style="background: #ff6600;">
母婴居家
</div>
<div class="louti" style="background: #ffff00;">
图书汽车
</div>
<div class="louti" style="background: #3333ff;">
虚拟
</div>
<div class="louti" style="background: #ff00cc;">
还没逛够
</div>
</div>
<div id="footer">
网站底部
</div>
再设置css区分各个栏目:
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: 'microsoft yahei';
}
#loutinav {
width: 35px;
position: fixed;
top: 100px;
left: 50px;
border: 1px solid #ddd;
display: none;
}
#loutinav ul li {
width: 35px;
height: 32px;
border-bottom: 1px dotted #DDDDDD;
list-style: none;
font-size: 12px;
text-align: center;
position: relative;
cursor: pointer;
padding: 10px 0;
background: #918888;
color: #fff;
}
#loutinav ul li span {
width: 35px;
height: 32px;
padding: 10px 0;
position: absolute;
top: 0;
left: 0;
}
#loutinav ul li.last {
background: #5e4a4a;
color: #fff;
border-bottom: 1px solid #ddd;
}
#loutinav ul li.active span {
background: #c00;
color: #fff;
display: block;
}
#loutinav ul li:hover span {
background: #c00;
color: #fff;
display: block;
}
#header {
width: 1000px;
height: 1000px;
background: #cc6633;
margin: 0 auto;
font-size: 50px;line-height: 1000px;text-align: center;
color: #000;
}
#main {
width: 1000px;
background: #66ff66;
margin: 0 auto;
}
#main .louti {
height: 600px;
width: 1000px;
font-size: 50px;
color: #fff;
font-weight: bold;
text-align: center;
line-height: 600px;
}
#footer {
width: 1000px;
height: 400px;
background: red;
margin: 0 auto;
font-size: 50px;line-height: 400px;text-align: center;
color: #000;
}
</style>
到此,我们已经将页面的布局、外观设计完毕,接下来就是让页面动起来。在这之前,需要了解几个关键css设置。
- postion:fixed
该属性生成绝对定位的元素,相对于浏览器窗口进行定位。通过这个属性即可使导航栏固定在屏幕上,不随页面位置变化二变化。 - .active
这个“.active”在css并未单独设置属性值,用于实现动态添加,当li中含.active类名时,开始使用li.active样式。
使用动态设计,就有必要用到JS,我在这里使用JQuery,具体如下:
$(function(){
//1.楼梯什么时候显示,800px scroll--->scrollTop
$(window).on('scroll',function(){
var $scroll=$(this).scrollTop();
if($scroll>=800){
$('#loutinav').show();
}else{
$('#loutinav').hide();
}
//4.拖动滚轮,对应的楼梯样式进行匹配
$('.louti').each(function(){
var $loutitop=$('.louti').eq($(this).index()).offset().top+400;/**/
//console.log($loutitop);
if($loutitop>$scroll){//楼层的top大于滚动条的距离
$('#loutinav li').removeClass('active');
$('#loutinav li').eq($(this).index()).addClass('active');
return false;//中断循环,阻止后面的li添加active
}
});
});
//2.获取每个楼梯的offset().top,点击楼梯让对应的内容模块移动到对应的位置 offset().left
var $loutili=$('#loutinav li').not('.last');
$loutili.on('click',function(){
$(this).addClass('active').siblings('li').removeClass('active');
var $loutitop=$('.louti').eq($(this).index()).offset().top;//li的位置的值与louti位置的值相同
//获取每个楼梯的offsetTop值
$('html,body').animate({//$('html,body')兼容问题body属于chrome
scrollTop:$loutitop
});
});
//3.回到顶部
$('.last').on('click',function(){
$('html,body').animate({//$('html,body')兼容问题body属于chrome
scrollTop:0
});
});
});
注意:
“offset().top+400”这一设定的“+400”纯属为了美观,至于具体“+”多少应你自己的样式设定而定,可用console.log()边改边看效果。
此外,这个方法有一很大弊端,及当栏目的高度(“height”)相差很大时,显示效果会参差不齐,该方法只适用于栏目高度相差极小的页面设置。