一.html
<img src="" alt="">
<nav>
<ul>
<li class="active">首页</li>
<li>首页商城</li>
<li>首页哈哈</li>
<li>首页开始对接客户是</li>
</ul>
</nav>
<div id="div1">首页</div>
<div id="div2">首页商城</div>
<div id="div3">首页哈哈</div>
<div id="div4">首页开始对接客户是</div>
二.css
<style>
*{
padding:0;
margin:0;
list-style: none;
box-sizing: border-box;
}
body{
/* height:2000px; */
background: linear-gradient(blue, pink);
}
nav{
width:800px;
margin:0 auto;
padding:10px 30px;
background: orange;
position: absolute;
left:50%;
top:634px;
transform: translateX(-50%)
}
li{
display: inline-block;
font-size: 16px;
color:#fff;
padding:0 20px;
}
li.active{
background: pink;
color:orange;
}
img{
width:100%;
display: block;
}
.nav-fixed{
position: fixed;
top:0;
left:50%;
transform: translateX(-50%);
}
div{
height:600px;
border:1px solid white;
margin:30px auto;
font-size: 30px;
}
#div1{
margin-top:80px;
}
</style>
三.jq
<script>
//分析
/*
1. 滚动条滚动到某个点然后导航固定定位
2. 导航到达文档顶部的距离【docuHeight】是判断依据
3. 当滚动条滚动的高度大于等于docuHeight的时候触发固定定位,否则回到标转文档流
*/
var div1Top = $("#div1").offset().top;
var div2Top = $("#div2").offset().top;
var div3Top = $("#div3").offset().top;
var div4Top = $("#div4").offset().top;
var navTop = $( "nav" ).offset().top;
$(window).scroll(function(){
var scrollHeight = $(window).scrollTop();
if(scrollHeight>=navTop){
$("nav").addClass("nav-fixed");
}else{
$("nav").removeClass("nav-fixed");
}
// 单个导航的判断
if(scrollHeight>=div1Top &&scrollHeight<div2Top){
$("li").removeClass("active");
$("li").eq(0).addClass("active");
}
if(scrollHeight>=div2Top &&scrollHeight<div3Top){
$("li").removeClass("active");
$("li").eq(1).addClass("active");
}
if(scrollHeight>=div3Top &&scrollHeight<div4Top){
$("li").removeClass("active");
$("li").eq(2).addClass("active");
}
if(scrollHeight>=div4Top){
$("li").removeClass("active");
$("li").eq(3).addClass("active");
}
})
$("li").click(function(){
var index = $(this).index();
var scHeight = $("div").eq(index).offset().top+1;
$("html").animate({
"scrollTop":scHeight+"px"
})
})
</script>