css
<style>
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
.header {
width: 1200px;
height: 1000px;
background-color: aqua;
margin: 0 auto;
}
.floor1 {
width: 1200px;
height: 700px;
background-color: rgba(255, 0, 0, 1);
margin: 10px auto;
}
.floor2 {
width: 1200px;
height: 700px;
background-color: rgba(255, 255, 0, 1);
margin: 10px auto;
}
.floor3 {
width: 1200px;
height: 700px;
background-color: rgba(255, 0, 255, 1);
margin: 10px auto;
}
.floor4 {
width: 1200px;
height: 700px;
background-color: rgba(255, 240, 0, 0.5);
margin: 10px auto;
}
.floor5 {
width: 1200px;
height: 700px;
background-color: rgba(255, 133, 0, 0.8);
margin: 10px auto;
}
.floor6 {
width: 1200px;
height: 700px;
background-color: rgba(133, 255, 0, 1);
margin: 10px auto;
}
.floor7 {
width: 1200px;
height: 700px;
background-color: rgba(80, 255, 0, 1);
margin: 10px auto;
}
.floor8 {
width: 1200px;
height: 700px;
background-color: rgba(0, 255, 0, 1);
margin: 10px auto;
}
.floor9 {
width: 1200px;
height: 700px;
background-color: rgba(170, 255, 0, 0.1);
margin: 10px auto;
}
.floor10 {
width: 1200px;
height: 700px;
background-color: rgba(82, 134, 40, 0.7);
margin: 10px auto;
}
.floor11 {
width: 1200px;
height: 700px;
background-color: rgba(123, 192, 26, 0.9);
margin: 10px auto;
}
.footer {
width: 1200px;
height: 1000px;
background-color: rgba(0, 0, 0, 1);
margin: 10px auto;
}
.leftNav {
width: 50px;
height: auto;
background-color: #666;
position: fixed;
left: 50%;
top: 50%;
transform: translateY(-50%);
margin-left: -680px;
display: none;
}
.leftNav ul {
width: 40px;
margin: 10px auto;
}
.leftNav ul li {
width: 100%;
height: 40px;
margin-bottom: 2px;
background-color: #333;
text-align: center;
color: #fff;
font-size: 13px;
line-height: 20px;
}
.leftNav ul li.backtop {
background-color: #666;
}
.leftNav ul li:hover {
background-color: #ff6699;
}
.leftNav ul li.active {
background-color: #ff6699;
}
</style>
html
<div class="header"></div>
<div class="floor1 f">黄金铂黄</div>
<div class="floor2 f">投资金银</div>
<div class="floor3 f">钻石</div>
<div class="floor4 f">银饰</div>
<div class="floor5 f">彩色宝石</div>
<div class="floor6 f">翡翠玉石</div>
<div class="floor7 f">珍珠</div>
<div class="floor8 f">流行饰品</div>
<div class="floor9 f">天然木饰</div>
<div class="floor10 f">奇趣收藏</div>
<div class="floor11 f">眼镜手表</div>
<div class="footer" ></div>
<div class="leftNav">
<ul>
<li style="background-color: #6d0528;">导航</li>
<li class="item active">黄金<br>铂黄</li>
<li class="item">投资<br>金银</li>
<li class="item">钻石</li>
<li class="item">银饰</li>
<li class="item">彩色<br>宝石</li>
<li class="item">翡翠<br>玉石</li>
<li class="item">珍珠</li>
<li class="item">流行<br>饰品</li>
<li class="item">天然<br>木饰</li>
<li class="item">奇趣<br>收藏</li>
<li class="item">眼镜<br>手表</li>
<li class="backtop">返回<br>顶部</li>
</ul>
</div>
js
使用jquery插件和js搭配完成。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="./js/move.js"></script>
<script>
var floor1 = document.querySelector('.floor1');
var leftNav = document.querySelector('.leftNav');
var fs = document.querySelectorAll('.f');
var items = document.querySelectorAll('.item');
console.log(items);
var backtop = document.querySelector('.backtop')
// load()
function load() {
//1.1 页面卷进去的距离
var y = window.pageYOffset
//1.2 floor1楼层距页面顶部的距离
var t = floor1.offsetTop - 100;
if (y >= t) {
leftNav.style.display = "block";
} else {
leftNav.style.display = "none";
}
//4.滚动页面时,让左侧的选项卡,也选中
for (var i = 0; i < fs.length; i++) {
var fst = fs[i].offsetTop - 100;
if (y > fst) {
var activeLi = document.querySelector('.leftNav li.active');
activeLi.classList.remove('active');
items[i].classList.add('active');
}
}
}
//1.页面滚动 window.onscroll
document.onscroll = function () {
load()
}
//2.左边导航 选项卡
for (var i = 0; i < items.length; i++) {
items[i].setAttribute('index', i)
items[i].onclick = function () {
console.log('aaa');
var activeLi = document.querySelector('.leftNav li.active');
activeLi.classList.remove('active');
this.classList.add('active');
//呼应内容区
var index = this.getAttribute('index');
// move(window, fs[index].offsetTop)
$("html,body").animate({
scrollTop: fs[index].offsetTop
});
}
}
//3.返回顶部
backtop.onclick = function () {
move(window, 0)
}
</script>