JS仿京东商品分类侧边栏

JS仿京东商品分类侧边栏

HTML代码部分

<div>
        <img src="/1.png" alt="">
    </div>
    <ul>
        <li><a href="">京东秒杀</a></li>
        <li class="two"><a href="">欢迎</a></li>
        <li><a href="">特色优选</a></li>
        <li><a href="">频道广场</a></li>
        <li><a href="">为你推荐</a></li>
        <li class="two"><a href="">客服</a></li>
        <li style="border-bottom: none;" class="two"><a href="">反馈</a></li>
    </ul>

CSS部分

<style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        div {
            width: 100%;

        }

        img {
            margin-left: 300px;
            display: block;
            margin: 0 auto;
        }

        ul {
            position: absolute;
            display: none;
            top: 350px;
            left: 1700px;
            width: 60px;
            height: 400px;
            border: 1px solid red;
            box-sizing: border-box;

        }

        ul li {
            width: 100%;
            height: 57px;
            list-style: none;
            text-align: center;
            float: right;
            padding: 5px 10px;
            line-height: 26px;
            text-align: center;
            float: left;
            box-sizing: border-box;
            border-bottom: 1px solid #eee;
        }

        li:hover {
            background-color: red;
        }

        li:hover a {
            color: white;
        }

        .two {
            line-height: 52px;
        }

JS部分

<script>
        document.addEventListener('scroll', function () {
            var ul = document.querySelector('ul')
            console.log(window.pageYOffset)
            if (window.pageYOffset > 700) {
                ul.style.display = 'block'
                ul.style.position = 'fixed';
            } else {
                ul.style.display = 'none'
            }
        })
    </script>