HTML
<div class="container">
<header></header>
<div class="mark"></div>
<div class="content">
<ul>
<li>
<p class="title">导航01</p>
<div class="aaa" attr="导航1">
oneoneoneone
</div>
</li>
<li>
<p class="title">导航02</p>
<div class="aaa" attr="task02">
twotwotwotwo
</div>
</li>
<li>
<p class="title">导航03</p>
<div class="aaa" attr="task03">
threethreethreethree
</div>
</li>
<li>
<p class="title">导航04</p>
<div class="aaa" attr="task04">
threethreethreethree
</div>
</li>
</ul>
</div>
</div>
CSS
html,body {
width:100%;
margin:0;
padding:0;
}
.container {
width:100%;
margin:0;
padding:0;
padding-bottom:800px;
}
header {
background:lightblue;
width:100%;
height:80px;
position:fixed;
top:0;
left:0;
}
.mark {
height:20px;
position:fixed;
width:80%;
top:80px;
margin-left:10%;
background:lightseagreen;
}
.content {
width:80%;
margin:140px auto 0;
background:lightsalmon;
}
ul {
list-style-type:none;
margin:0;
padding:0;
}
.title {
background:lightseagreen;
height:20px;
}
JS
$(window).load(function() {
// 初始化设置
//获取第一个标题元素距离页面顶端的距离
var top = $(".title:first").offset().top;
//移动页面,使第一个title元素到mark的位置,并将title中的文字给mark
window.scrollTo(0, top - 80);
$(".mark").html($(".title:first").html());
// 滚动事件
var titles = $(".title");
var obj = {};
for (var i = 0; i < titles.length; i++) {
obj["top" + i] = $(titles[i]).offset().top - 80;
}
$(window).scroll(function() {
//如果页面向上拉伸的距离大于等于哪个title距离顶部的距离,就将哪个title中的文字给mark
for (var i = 0; i < titles.length; i++) {
if ($(window).scrollTop() >= obj["top" + i] && $(window).scrollTop() <= obj["top" + (i + 1)]) {
$(".mark").html($(".title").eq(i).html());
$(".mark").css("height", "20px");
} else if ($(window).scrollTop() >= obj["top" + (titles.length - 1)] &&
$(window).scrollTop() <= obj["top" + (titles.length - 1)] + parseFloat($(".title").eq(titles.length - 1).next('div').height())) {
$(".mark").html($(".title").eq(titles.length - 1).html());
$(".mark").css("height", "20px");
} else if ($(window).scrollTop() <= obj.top0) {
$(".mark").html("");
$(".mark").css("height", "0");
} else if ($(window).scrollTop() >= obj["top" + (titles.length - 1)] + parseFloat($(".title").eq(titles.length - 1).next('div').height())) {
$(".mark").html("");
$(".mark").css("height", "0");
}
}
});
});
拜