效果图：
Paste_Image.png
<!--文档声明为 html（最新html5）-->
<!doctype html>
<html>
<head>
<!--声明当前页面编码格式为国际编码（utf-8）还有一种中文编码（gbk/gb2312）-->
<meta charset="UTF-8">
<!--网页三要素-->
<meta name="Keywords" content="关键词,关键词">
<meta name="Description" content="描述">
<title>网页的标题</title>
<!--css 层叠样式表 衣服，化妆品 修饰自己 修饰body-->
<style>
*{margin:0;padding:0;}
.slide-nav{/*以 . 开头 就是类样式 class命名*/
width:65px;/*宽*/
height:455px;/*高*/
background:#fff;/*背景颜色*/
position:fixed;/*固定定位 把元素固定到浏览器窗口某个位置*/
left:30px;
top:300px;
padding:5px;
border-radius:5px;/*小圆角*/
border:1px solid #C5C5C5;/*边框线*/
display:none;
}
.slide-nav ul li{
list-style:none;/*去掉默认的列表样式*/
width:65px;
height:35px;
font-size:12px;/*文本大小*/
color:#666;/*文字颜色*/
line-height:35px;/*行高 把文字放在行高中间*/
border-radius:5px;/*小圆角*/
cursor:pointer;/*手指形状*/
}
@font-face {font-family: 'iconfont';
src: url('ioc/iconfont.eot'); /* IE9*/
src: url('ioc/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('ioc/iconfont.woff') format('woff'), /* chrome、firefox */
url('ioc/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('ioc/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
margin:0 5px;/*上下 左右*/
}
.slide-nav ul li:hover{
color:#ff00ff;
}
.slide-nav ul li.active{
background:#ff00ff;
color:#fff;
}
/*头部样式*/
.header-box{
width:100%;
height:80px;
background:#321762;
}
.header-box .header-con{
width:1000px;
height:80px;
margin:0 auto;/*上下 左右居中*/
}
/*logo 样式*/
.logo{
width:1000px;
height:130px;
margin:0 auto;
}
/*导航样式*/
.nav-box{
width:100%;
height:40px;
background:#f10180;
}
.nav-box .nav{
width:1000px;
height:40px;
margin:0 auto;
}
/*主体样式*/
.main{
width:1000px;
margin:0 auto;
}
.main .con{
width:1000px;
}
.footer{
width:1000px;
height:470px;
}
</style>
</head>
<body>
<!--
命名：区分个体与个体 添加样式 js控制元素对象
id="" 身份证 唯一性 #
class="" 同名同姓 多个
-->
<!--slide-nav star-->
<div class="slide-nav">
<ul>
<li class="active"><i class="iconfont"></i>精选</li>
<li><i class="iconfont"></i>女装</li>
<li><i class="iconfont"></i>鞋包</li>
<li><i class="iconfont"></i>男士</li>
<li><i class="iconfont"></i>运动</li>
<li><i class="iconfont"></i>饰品</li>
<li><i class="iconfont"></i>美妆</li>
<li><i class="iconfont"></i>母婴</li>
<li><i class="iconfont"></i>居家</li>
<li><i class="iconfont"></i>国际</li>
<li><i class="iconfont"></i>生活</li>
<li><i class="iconfont"></i>预告</li>
</ul>
</div>
<!--slide-nav end-->
<!--头部 star-->
<div class="header-box">
<div class="header-con"></div>
</div>
<!--头部 end-->
<!--logo star-->
<div class="logo"></div>
<!--logo end-->
<!--导航 star-->
<div class="nav-box">
<div class="nav"></div>
</div>
<!--导航 end-->
<!--主体 star-->
<div class="main">
<div class="con"></div>
<div class="con"></div>
<div class="con"></div>
<div class="con"></div>
<div class="con"></div>
<div class="con"></div>
<div class="con"></div>
<div class="con"></div>
<div class="con"></div>
<div class="con"></div>
<div class="con"></div>
<div class="con"></div>
</div>
<!--主体 end-->
<!--footer star-->
<div class="footer"></div>
<!--footer end-->
<script src="js/jquery.js"></script>
<script>
var k=true;
$(window).scroll(function(){
if(k){
var ao=$(window).scrollTop();
if(ao>300){
$('.slide-nav').show();
}else{
$(".slide-nav").hide();
};
// 遍历小图标 获取他的高度 在比较那个该显示
$('.con').each(function(){
var hgt=$(this).offset().top+300;
var indexx=$(this).index();
if(hgt>ao){
$('.slide-nav ul li').eq(indexx).addClass('active').siblings().removeClass("active");
return false;
}
})
}
})
// 点击事件
$('.slide-nav ul li').click(function(){
// console.log("ee")
k=false;
$(this).addClass('active').siblings().removeClass("active");
var indexx=$(this).index();
var hgt=$('.con').eq(indexx).offset().top;
// $('body,html').animate({scrollTop:hgt},500,function(){
// k=true;
// })
$("body,html").animate({scrollTop:hgt},500,function(){
k=true;
})
})
</script>
</body>
</html>
