//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>
