标签：center 导航 模块 div lin sha doctype function pre
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style>
*{padding: 0;margin: 0;list-style: none;}
.clearfix:after {
display: block;
content: "";
clear: both;}
.clearfix { zoom: 1}
.list-div ul{margin: 0 auto;display: inline-block;}
.list-ul li{float: left;list-style: none;width: 100px;border: 1px solid #ddd;text-align: center;height: 40px;line-height: 40px;}
.list-ul li.active{color: #f33;border-color: #f33;}
.list-div{position:fixed;top:0;left: 0;background: #fff;width: 100%;text-align: center;height: 50px;}
</style>
</head>
<body>
<div>
<div class="list-div">
<ul class="list-ul clearfix">
<li class="">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div style="margin-top: 50px;">
<div class="div-item" style="height: 400px;background: aqua;"></div>
<div class="div-item" style="height: 500px;background: blue"></div>
<div class="div-item" style="height: 900px;background: blueviolet"></div>
<div class="div-item" style="height: 500px;background: darkolivegreen"></div>
</div>
</div>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(function () {
PageScroll(".list-ul li",".div-item",28)
})
function PageScroll(navclick,maodian,elseHeight){
//第一个参数 滚动对应导航的集合 默认类名为active
//第二个参数 滚动模块的集合
//第三个参数 导航的高度或者你想去除的高度
$(navclick).on("click",function () {
var scrollT=$(maodian).eq($(this).index()).offset().top;
$(window).scrollTop(scrollT-50)
})
//滚动事件
$(window).scroll(function() {
var con_scroll = $(this).scrollTop();
$(maodian).each(function(index,domEle){
var md_index = $(this).offset().top-elseHeight;
if(con_scroll>md_index-elseHeight){
$(navclick).eq(index).addClass("active").siblings().removeClass(‘active‘)
}
})
});
}
</script>
</body>
</html>
标签：center 导航 模块 div lin sha doctype function pre
原文地址：https://www.cnblogs.com/shanshanjiadexiaohai/p/11026424.html
