|
该解决方案使用viewport units用于设置头即height:20vh并且每个部分height:80vh的height，一起它显示视口的100vh全高度。
然后，加入每个部分以上，并设置height和margin-top数字基于报头的height用于创建偏移量，也分配了部分的ID给他们。因此，当浏览导航链接时，它会跳转到正确的位置。
的jsfiddle：http://jsfiddle.net/1dx5he8r/
$(document).ready(function() {
$('#nav li:first-child a').addClass('active');
});
$(window).on('scroll', function() {
$('#main > span').each(function() {
if($(window).scrollTop()+1 >= $(this).offset().top) {
var id = $(this).attr('id');
$('#nav a').removeClass('active');
$('#nav a[href=#'+ id +']').addClass('active');
}
});
});
body {
font-family: sans-serif;
margin: 0;
}
#header {
width: 100%;
height: 20vh;
background: #000;
position: fixed;
left: 0;
top: 0;
z-index: 1;
}
#nav {
list-style: none;
position: absolute;
bottom: 10px;
left: 10px;
padding: 0;
margin: 0;
}
#nav li {
display: inline-block;
margin: 0 5px;
}
#nav a {
color: #fff;
text-decoration: none;
}
#nav .active {
color: red;
}
#main > span {
display: block;
height: 20vh; /*same height as #header*/
margin-top: -20vh; /*same height as #header*/
visibility: hidden;
}
#main > span:first-child {
margin-top: 0;
}
#main > div {
height: 80vh;
}
#section_01 + div {
background: silver;
}
#section_02 + div {
background: lime;
}
#section_03 + div {
background: yellow;
}
#section_04 + div {
background: fuchsia;
}
#section_05 + div {
background: aqua;
}
#section_06 + div {
background: teal;
}
section_01
section_02
section_03
section_04
section_05
section_06
1
2
3
4
5
6
|