如何在鼠标滑动时顶部元素距离顶部距离一直为0px

思路:主要使用的是滚动事件;首先给<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>
posted @ 2023-05-20 11:36  胡猿外  阅读(87)  评论(0)  编辑  收藏  举报