思路:主要使用的是滚动事件;首先给<div id="scroll_top">搜索框</div>的样式设置固定定位position: fixed;然后他样式隐藏,在js中给它一个滚动事件滑动时显示. 该元素<div id="box_top">在鼠标滚动时隐藏.
css 部分
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#box_top {
width: 100%;
height: 50px;
position: relative;
background-color: pink;
display: block;
}
#clas {
position: absolute;
top: 5px;
right: 5px;
border: none;
background-color: pink;
}
#box_topA {
width: 800px;
height: 800px;
margin: 0 auto;
background-color: palevioletred;
}
#box_topB {
width: 800px;
height: 270px;
margin: 0 auto;
background-color: rgb(240, 63, 122);
}
#box_topC {
width: 800px;
height: 800px;
margin: 0 auto;
background-color: rgb(226, 27, 93);
}
#box_topD {
width: 800px;
height: 800px;
margin: 0 auto;
background-color: rgb(163, 12, 63);
}
#box_topE {
width: 800px;
height: 800px;
margin: 0 auto;
background-color: rgb(125, 7, 46);
}
#ul_A {
width: 65px;
height: 330px;
/* border: 1px solid black; */
color: black;
border-bottom: none;
position: fixed;
top: 100px;
right: 30px;
background-color: white;
}
li {
width: 65px;
height: 65px;
border-bottom: 1px solid black;
text-align: center;
line-height: 65px;
}
.li1:hover {
background-color: red;
}
.li2:hover {
background-color: red;
}
.li3:hover {
background-color: red;
}
.li4:hover {
background-color: red;
}
.li5:hover {
background-color: red;
}
.li6:hover {
background-color: red;
}
#box {
background-color: rgb(242, 250, 250);
}
.a {
background-color: red;
}
#scroll_top {
width: 100%;
height: 50px;
position: fixed;
background-color: yellow;
display: none;
text-align: center;
}
</style>
html 部分
<div id="box_top">
<button id="clas">X</button>
</div>
<div id="scroll_top">搜索框</div>
<div id="box">
<div id="box_topA"></div>
<div id="box_topB"></div>
<div id="box_topC"></div>
<div id="box_topD"></div>
<div id="box_topE"></div>
<ul id="ul_A">
<li class="li1">京东秒杀</li>
<li class="li2">频道广场</li>
<li class="li3">为你推荐</li>
<li class="li4">客服</li>
<li class="li5">反馈</li>
<li class="li6">返回顶部</li>
</ul>
</div>
js 部分
<script>
clas.onclick = function () {
box_top.style.display = `none`;
}
var liA = document.querySelectorAll(`li`);// 按钮
var h1s = box.children;// 获取内容标签
console.log(liA, h1s);
var index = 0;
for (let i = 0; i < liA.length; i++) {
console.log(liA[i]);
liA[i].addEventListener(`click`, function () {
liA[index].classList.remove(`a`);
this.classList.add(`a`);
index = i;
var ost = h1s[index].offsetTop;// 获取h1到达窗口顶部的距离
document.documentElement.scrollTop = ost;// 把h1到达窗口顶部的距离赋值给滚动条滚动的高度
console.log(ost);
});
}
window.addEventListener(`scroll`, function () {
var st = document.documentElement.scrollTop;
var H = window.innerHeight;
console.log(st, H);
scroll_top.style.display = `block`;
scroll_top.style.top = 0 + `px`;
for (let i = 0; i < h1s.length; i++) {
var h1 = h1s[i];
console.log(h1);
var ost = h1.offsetTop;
var osh = h1.offsetHeight;
if (H / 2 + st > ost && H / 2 + st < ost + osh) {
liA[index].classList.remove(`a`);
liA[i].classList.add(`a`);
index = i;
break;
}
}
});
</script>