导航吸顶效果

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.

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.

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.

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?

 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;
}

$(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");
             }
         }
     });

});

PROMULGATOR

bdfile

相关代码

导航吸顶效果

最新