<!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>左右联动</title>
<style>
/* * {
margin: 0;
padding: 0;
} */
aside {
position: absolute;
right: 30px;
top: 150px;
background-color: hotpink;
}
ul {
padding-left: 0;
margin: 0;
}
aside li {
padding: 20px;
list-style: none;
}
aside li:hover {
background-color: red;
color: white;
}
</style>
</head>
<body>
<header>
<p>001</p>
<p>002</p>
<p>003</p>
<p>004</p>
</header>
<main>
<!-- div*4>p+ul>li{$$$}*20 -->
<div>
<p>京东秒杀</p>
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
<li>006</li>
<li>007</li>
<li>008</li>
<li>009</li>
<li>010</li>
<li>011</li>
<li>012</li>
<li>013</li>
<li>014</li>
<li>015</li>
<li>016</li>
<li>017</li>
<li>018</li>
<li>019</li>
<li>020</li>
</ul>
</div>
<div>
<p>特色优选</p>
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
<li>006</li>
<li>007</li>
<li>008</li>
<li>009</li>
<li>010</li>
<li>011</li>
<li>012</li>
<li>013</li>
<li>014</li>
<li>015</li>
<li>016</li>
<li>017</li>
<li>018</li>
<li>019</li>
<li>020</li>
</ul>
</div>
<div>
<p>频道广场</p>
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
<li>006</li>
<li>007</li>
<li>008</li>
<li>009</li>
<li>010</li>
<li>011</li>
<li>012</li>
<li>013</li>
<li>014</li>
<li>015</li>
<li>016</li>
<li>017</li>
<li>018</li>
<li>019</li>
<li>020</li>
</ul>
</div>
<div>
<p>为我推荐</p>
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
<li>006</li>
<li>007</li>
<li>008</li>
<li>009</li>
<li>010</li>
<li>011</li>
<li>012</li>
<li>013</li>
<li>014</li>
<li>015</li>
<li>016</li>
<li>017</li>
<li>018</li>
<li>019</li>
<li>020</li>
</ul>
</div>
</main>
<aside>
<ul>
<li>京东秒杀</li>
<li>特色优选</li>
<li>频道广场</li>
<li>为我推荐</li>
</ul>
</aside>
<script>
// 1.侧边栏的初始位置计算
// 侧边栏
var aside = document.querySelector("aside");
// 主内容四项
var divs = document.querySelectorAll("main>div");
// offsetTop:距离定位父标签上边界的值。
console.log(divs[0].offsetTop);
aside.style.top = divs[0].offsetTop + "px";
// 2.页面滚动道一定位置时(侧边栏即将离开视线)，侧边栏编程固定定位
// 监听窗口事件
window.onscroll = function () {
// window.scrollY:获取窗口竖直方向的滚动距离。
// aside.offsetTop:获取aside距离页面上边界的值
if (window.scrollY > aside.offsetTop) {
// 侧边栏即将离开视线，设置固定定位
aside.style.position = "fixed";
aside.style.top = "50px";
} else {
// 侧边栏不会离开视线时，侧边栏是绝对定位(重置为初始状态)
aside.style.position = "absolute";
aside.style.top = divs[0].offsetTop + "px";
}
}
// 3.点击侧边栏分类，主内容对应的分类会滚动到页面顶部。
var lis = document.querySelectorAll("aside li");
// 定义便变量，记录被点击的li的索引，初始-1(-1是不合法的索引，正好最初没有li被点击)。
var index = 0;
for (var k = 0; k < lis.length; k++) {
lis[k].index = k;
lis[k].onclick = function () {
console.log("li click");
// this 指的是绑定事件的标签，aside中的li
console.log(this.index);
// 根据点击li的索引，找到对应主内容中的div.
var div = divs[this.index];
console.log(div);
// 页面滚到指定位置
scrollTo({
left: 0,
top: div.offsetTop,
behavior: "smooth"
})
// 上一次点击li，回归原状，这次点击的li,文本变为红色
// 注意：第一次点击时，没有上一次(index值是-1)，从lis中找不到上一次的li,进不去if语句，没操作。
if (lis[index]) {
lis[index].style.color = "black";
}
// 记录当前被点击li的索引，下次使用就是上一次的点击元素
index = this.index;
this.style.color = "blue";
}
}
//4.主内容滚动时，右边选中的分类发生变化。
//元素的on+事件多次使用，之后的会把之前的覆盖掉。所以这里使用addEventListener();
window.addEventListener("scroll", function () {
// 比较主内容的滚动距离(scrollY)和每一个分类距离页面上方的值(offsetTop);
for (var i = divs.length - 1; i >= 0; i--) {
if (window.scrollY >= divs[i].offsetTop) {
// 上一个侧边栏选项改变为黑色字体
if (lis[index]) {
lis[index].style.color = "black";
}
index = i;
lis[index].style.color = "red";
// 找到了，结束
return;
}
}
})
</script>
</body>
</html>
