<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box > div {
width: 100%;
height: 800px;
}
.box1 {
background-color: lightblue;
}
.box2 {
background-color: lightcoral;
}
.box3 {
background-color: lightcyan;
}
.box4 {
background-color: lightgoldenrodyellow;
}
.box5 {
background-color: lightgray;
}
.nav {
width: 80px;
height: 20px;
position: fixed;
left: 100px;
top: 50%;
transform: translateY(-50%);
}
.nav div {
border: 1px solid lightgreen;
background: lightpink;
cursor: pointer;
}
.back {
position: fixed;
right: 30px;
bottom: 200px;
width: 50px;
height: 20px;
text-align: center;
background: lightsalmon;
display: none;
}
.current {
background-color: lightseagreen !important;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
<div class="nav">
<div class="nav1 current">家用电器</div>
<div class="nav2">家用家具</div>
<div class="nav3">手机数码</div>
<div class="nav4">语文数学</div>
<div class="nav5">英语体育</div>
</div>
<div class="back">back</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() >= $('.box2').offset().top) {
$('.back').fadeIn();
} else {
$('.back').fadeOut();
}
for (let i = 0; i < $('.box div').length; i++) {
if ($(window).scrollTop() >= $('.box div').eq(i).offset().top) {
$('.nav div')
.eq(i)
.addClass('current')
.siblings()
.removeClass('current');
}
}
});
$('.nav div').click(function () {
$(this).addClass('current').siblings().removeClass('current');
$('html, body').animate({
scrollTop: $('.box div').eq($(this).index()).offset().top,
});
});
$('.back').click(function () {
$('html,body').animate({ scrollTop: 0 });
});
});
</script>
</body>
</html>
基于jq的电梯导航!!!∑(゚Д゚ノ)ノ
最新推荐文章于 2022-08-30 12:23:26 发布