//css代码
<style>
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;/* line-height: 40px; *//*background: #fff;*//*color:red;*/margin-left: 10%;background: lightseagreen;}
.content {width: 80%;margin: 140px auto 0;background: lightsalmon;}
.itemContainer{list-style-type: none;margin: 0;padding: 0;}
.kx-time {background: lightseagreen;height: 40px;line-height: 40px;}
</style>
<script srrc=""js/jquery.min.js""></script>
//html代码
<div class="container">
<header></header>
<div class="mark"></div>
<div class="content"></div>
<ul>
<p class="kx-time">task01</p>
<li class="aaa" attr="task01">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ex facilis nostrum rerum. Aliquam asperiores debitis
laborum laudantium, magni nemo nihil nisi perferendis porro rem repellendus rerum tempore velit voluptas? Lorem ipsum
dolor sit amet, consectetur adipisicing elit. A, consequuntur error expedita explicabo incidunt maiores placeat praesentium
quasi quidem vero! Accusantium deleniti enim molestias nesciunt provident quibusdam repudiandae sit, ut. Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Accusantium, aperiam, cum debitis dolorem dolores magni neque obcaecati
optio repellat rerum sed velit. Consequatur nemo omnis quam qui reprehenderit unde voluptate.
</div>
<li>
</ul>
</div>
<script>
$(window).load(function () {
//获取第一个标题元素距离页面顶端的距离
var top = $(".kx-time:first").offset().top;
var headerHeight = $("header").height();
//移动页面，使第一个title元素到mark的位置,并将title中的文字给mark
window.scrollTo(0, top - headerHeight);
$(".mark").html($(".kx-time:first").html());
/**
* 滚动事件
*/
var titles = $(".kx-time");
var obj = {};
for (var i = 0; i < titles.length; i++) {
obj["top" + i] = $(titles[i]).offset().top - headerHeight;
}
$(window).scroll(function () {
//如果页面向上拉伸的距离大于等于哪个title距离顶部的距离，就将哪个title中的文字给mark
for (var i = 0; i < titles.length; i++) {
if ($(window).scrollTop() >= obj["top" + i]) {
// console.log(111)
$(".mark").html($(".kx-time").eq(i).html());
$(".mark").css("height", "40px");
// console.log(22222)
} else if ($(window).scrollTop() >= obj["top" + (titles.length - 1)] &&
$(window).scrollTop() <= obj["top" + (titles.length - 1)] + parseFloat($(".kx-time").eq(titles.length - 1).next('div').height())) {
$(".mark").html($(".kx-time").eq(titles.length -1 ).html());
$(".mark").css("height", "40px");
} else if ($(window).scrollTop() <= obj.top0) {
$(".mark").html("");
$(".mark").css("height", "0");
} else if ($(window).scrollTop() >= obj["top" + (titles.length - 1)] + parseFloat($(".kx-time").eq(titles.length - 1).next('div').height())) {
$(".mark").html("");
$(".mark").css("height", "40px");
}
}
});
});
</script>
