jquery实现导航吸顶效果，主要通过监听页面滚动事件和获取页面各参数实现，可参考我的博客《使用原生js获取页面信息》和jquery手册
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<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;
/*background: #fff;*/
/*color: red;*/
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;
}
</style>
</head>
<body>
<div class="container">
<header></header>
<div class="mark"></div>
<div class="content">
<ul>
<li>
<p class="title">task01</p>
<div class="aaa" attr="task01">
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>
<li>
<p class="title">task02</p>
<div class="aaa" attr="task02">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi cum dicta enim fugiat impedit, iste itaque labore laudantium non perspiciatis provident recusandae repellat sequi vel velit voluptate voluptatum? Repellat, voluptatibus?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, adipisci alias animi at delectus dolor doloribus enim, ex itaque modi omnis, porro quae quia quis tempore vero voluptatem voluptates voluptatibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit hic libero quae quos
repellat. Ab aliquam aliquid deleniti distinctio dolorem dolores excepturi laudantium
mollitia non perspiciatis qui quos, sit tenetur.
Accusamus asperiores aspernatur blanditiis corporis cupiditate deserunt dolor dolorem ea
exercitationem facilis hic in iure laboriosam laborum necessitatibus nemo neque nihil
numquam officia, omnis perferendis quidem quisquam sequi vitae voluptas.
At cupiditate dolorum, ducimus eius error ex hic nam neque nobis odit reiciendis sunt
ullam. At aut dolor doloribus esse harum impedit laudantium nostrum obcaecati suscipit
tempore temporibus veritatis, voluptate.
</div>
</li>
<li>
<p class="title">task03</p>
<div class="aaa" attr="task03">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet consectetur harum hic iste
nesciunt rem vel vero. Ab architecto dolores illo laborum modi nam neque pariatur quos
repudiandae sunt! Laboriosam!
Ad aut deleniti error esse ipsam laborum maiores, molestiae numquam perferendis placeat
repellat, similique sint totam! Ab aliquam aliquid, earum eveniet ex magnam minima
perferendis, quisquam saepe sequi, sunt voluptatem.
Alias, cum cupiditate debitis libero provident quasi veniam veritatis voluptatum?
Accusantium ad amet architecto asperiores consequatur culpa cumque error ex facilis illo
iste laboriosam mollitia, nihil provident quaerat, similique velit.
Excepturi laudantium modi nostrum possimus veritatis, voluptas. Explicabo magni nesciunt
tempora unde! Consequatur cum enim exercitationem iste iure magni, mollitia nemo similique
totam. Esse labore mollitia nam quae quos sunt?
A aliquid, aperiam cum, debitis, delectus dolore labore maxime nemo nobis nostrum quas quia
sit ullam. Animi at autem consectetur culpa eum incidunt molestiae, perferendis repellendus
sequi, vel voluptas voluptate?
Ad, aliquid consequuntur corporis est eveniet, harum hic incidunt molestiae molestias
natus, neque officiis provident quis veritatis voluptate! Distinctio ea eius esse obcaecati
provident quam quis quod repellendus saepe voluptas.
Esse neque similique veritatis. Ad animi aperiam at eum fuga fugiat iure, iusto natus quas
voluptate. Ipsam, nam, nulla. Consequuntur distinctio eius, eligendi expedita explicabo
fugit illum ipsum magni mollitia.
</div>
</li>
<li>
<p class="title">task04</p>
<div class="aaa" attr="task04">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat quae quis velit? At eveniet expedita fugiat quis saepe. Deleniti eaque facilis in omnis suscipit! A dolor est facere facilis hic!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dolor dolorem dolores eveniet excepturi minus officiis quisquam reiciendis saepe tempora? Aut consectetur cupiditate doloremque ipsa laborum quo. Assumenda, corporis, non!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium cumque excepturi ipsam ipsum molestias mollitia natus officia pariatur, provident quisquam, suscipit? Doloremque earum ex exercitationem minus odio optio possimus?
</div>
</li>
</ul>
</div>
</div>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(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");
}
}
});
});
</script>
</body>
</html>