效果圖：
Paste_Image.png
<!--文檔聲明為 html（最新html5）-->
<!doctype html>
<html>
<head>
<!--聲明當(dāng)前頁面編碼格式為國際編碼（utf-8）還有一種中文編碼（gbk/gb2312）-->
<meta charset="UTF-8">
<!--網(wǎng)頁三要素-->
<meta name="Keywords" content="關(guān)鍵詞,關(guān)鍵詞">
<meta name="Description" content="描述">
<title>網(wǎng)頁的標(biāo)題</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;/*去掉默認(rèn)的列表樣式*/
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;
}
/*導(dǎo)航樣式*/
.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>
<!--
命名：區(qū)分個體與個體 添加樣式 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>運(yùn)動</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>預(yù)告</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-->
<!--導(dǎo)航 star-->
<div class="nav-box">
<div class="nav"></div>
</div>
<!--導(dǎo)航 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();
};
// 遍歷小圖標(biāo) 獲取他的高度 在比較那個該顯示
$('.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>
