首先我们来看看效果:
1.先编写html结构
<div class="navbar" id="navbar">
<ul>
<li data-navli = "1">吃鸡</li>
<li data-navli = "2">金铲铲</li>
<li data-navli = "3">王者荣耀</li>
<li data-navli = "4">刺客信条</li>
<li data-navli = "5">原神</li>
<li data-navli = "6">塞尔达</li>
<li data-navli = "7">永劫无间</li>
</ul>
</div>
<div class="inner_c header" style="height: 500px;">
</div>
<div class="inner_c" data-grid = "1" style="height: 500px;">
<h3>吃鸡</h3>
</div>
<div class="inner_c" data-grid = "2" style="height: 500px;">
<h3>金铲铲</h3>
</div>
<div class="inner_c" data-grid = "3" style="height: 500px;">
<h3>王者荣耀</h3>
</div>
<div class="inner_c" data-grid = "4" style="height: 500px;">
<h3>刺客信条</h3>
</div>
<div class="inner_c" data-grid = "5" style="height: 500px;">
<h3>原神</h3>
</div>
<div class="inner_c" data-grid = "6" style="height: 500px;">
<h3>塞尔达</h3>
</div>
<div class="inner_c" data-grid = "6" style="height: 500px;">
<h3>永劫无间</h3>
</div>
2.css代码:
body{
background-color: #000;
/* 这里是大背景 */
background-image: url(背景8.png);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;}
* {
margin: 0;
padding: 0;
}
.inner_c {
/* 添加小背景 */
background:url(背景图片.jpg)
center center;
background-size: cover;
height: 900px;
width: 100%;
width: 1000px;
margin: 0 auto;
background-color: lightgray;
margin-bottom: 20px;
}
.navbar {
position: fixed;
width: 70px;
border: 1px solid blue;
}
.navbar ul {
list-style: none;
}
.navbar li {
line-height: 300%;
text-align: center;
}
.navbar li.cur {
background-color: navy;
color: white;
}
3.jQuery代码:
<script type="text/javascript" src="jquery-1.12.1.min.js"></script>
<script type="text/javascript">
$("#navbar").css("right",$(window).width()/2-500-71);
$(window).resize(function(){
$("#navbar").css("right",$(window).width()/2-500-71);
});
var headerH = $(".header").outerHeight(true);
var gridHeightArr = [0];
function setGridHeightArr() {
var sum = 0;
gridHeightArr = [0];
$("div[data-grid]").each(function(){
gridHeightArr.push($(this).offset().top);
});
};
setGridHeightArr();
$(window).scroll(function(){
var A = $(window).scrollTop() - headerH + 150;
if( A <= 0) {
$(".navbar ul li").removeClass("cur");
return ;
}
for(var i = 1;i<gridHeightArr.length;i++) {
if(A > gridHeightArr[i-1] && A < gridHeightArr[i]) {
break;
}
}
$(".navbar ul li").eq(i-1).addClass("cur").siblings().removeClass("cur");
});
$(".navbar ul li").click(function(){
var floor = $(this).data("navli");
var h = $("div[data-grid="+floor+"]").offset().top;
$("html,body").animate({
"scrollTop":h
},300);
});
</script>
最后把这些代码编写到一个文件里楼层导航就做好了