h5页面---仿京东移动端分类导航栏,点击左侧导航栏按钮切换内容,点击左侧按钮自动跳转到页面顶部

00秃头小宝贝

已于 2024-01-05 14:01:55 修改

阅读量960

点赞数 7

文章标签：前端 javascript html css

于 2024-01-04 18:27:18 首次发布

本文链接：https://blog.csdn.net/m0_72929120/article/details/135393383

版权

1.效果图

2.html

<div>
        <header>
            <div class="arrow">
                <div class="left">

                </div>
            </div>
            <div class="search">
                <div class="search-img">
                    <img src="../小米官网/images/search.png" alt="" srcset="">
                </div>

                <input type="text" placeholder="搜索商品/店铺">
            </div>
            <div class="dian">
                ...

            </div>
        </header>
        <main>
            <div class="left-section">
                <ul>
                    <li>热门商品</li>
                    <li>手机数码</li>
                    <li>京东超市</li>
                    <li>家用电器</li>
                    <li>电脑办公</li>
                    <li>热门商品</li>
                    <li>手机数码</li>
                    <li>京东超市</li>
                    <li>家用电器</li>
                    <li>电脑办公</li>
                    <li>热门商品</li>
                    <li>手机数码</li>
                    <li>京东超市</li>
                    <li>家用电器</li>
                    <li>电脑办公</li>
                    <li>热门商品</li>
                    <li>手机数码</li>
                    <li>京东超市</li>
                    <li>家用电器</li>
                    <li>电脑办公</li>
                    <li>热门商品</li>
                    <li>手机数码</li>
                    <li>京东超市</li>
                    <li>家用电器</li>
                    <li>电脑办公</li>
                    <li>热门商品</li>
                    <li>手机数码</li>
                    <li>京东超市</li>
                    <li>家用电器</li>
                    <li>电脑办公</li>
                </ul>
            </div>
            <div class="right-section">
                 <div>1</div>
                 <div>2</div>
                 <div>3</div>
                 <div>4</div>
                 <div>5</div>
                 <div>6</div>
                 <div>7</div>
                 <div>8</div>
                 <div>9</div>
                 <div>10</div>
                 <div>11</div>
                 <div>12</div>
                 <div>13</div>
                 <div>14</div>
                 <div>15</div>
                 <div>16</div>
                 <div>17</div>
                 <div>18</div>
                 <div>19</div>
                 <div>20</div>
                 <div>21</div>
                 <div>22</div>
                 <div>23</div>
                 <div>24</div>
                 <div>25</div>
                 <div>26</div>
                 <div>27</div>
                 <div>28</div>
                 <div>29</div>
                 <div>30</div>
            </div>
        </main>
    </div>

2.js,关键document.documentElement.scrollTop,页面滚动属性

 <script>
        // 获取元素
        let li = document.querySelectorAll('.left-section li');
        let content = document.querySelectorAll('.right-section div');
        let ul = document.querySelector('.left-section ul');
        // 高亮显示,排他,利用双重forEach,先去除active,再给点击内容单独添加active
        li.forEach((item,index) => {
            li[0].classList.add('active')
            content[0].style.display = 'block'
            // 当index + 1 >29时，不再执行，防止报错
            if(index + 1 > 29){
                
            }else{
                content[index + 1].style.display = 'none'
            }
            item.onclick = (e) => {
                e.stopPropagation();
                li.forEach(i => {
                    i.classList.remove('active')
                })
                // 对应的content下标显示
                content[index].style.display = 'block'
                content.forEach((element,j) => {
                    if(index !== j){
                        element.style.display = 'none'
                    }
                });
                // 页面未滚动时
                document.documentElement.scrollTop = (46 * index)  //点击触发scrollTop = 0 ,也就是回到顶部
                item.classList.add('active')
            }
        })
        // 监听页面滚动,滚动事件添加高度
        window.addEventListener('scroll', () => {
            li.forEach((item,index) => {
                item.onclick = (e) => {
                    e.stopPropagation();
                    li.forEach(i => {
                        i.classList.remove('active')
                    })
                    // 对应的content下标显示
                content[index].style.display = 'block'
                content.forEach((element,j) => {
                    if(index !== j){
                        element.style.display = 'none'
                    }
                });
                    // 页面滚动时,获取当前滚动高度,每个li的高度为46px,根据当前点击的li的索引值,乘以索引值，得到距离页面顶部的高度,即为需要滑动到顶部的距离
                    document.documentElement.scrollTop = (46 * index)  //点击触发scrollTop = 0 ,也就是回到顶部
                    item.classList.add('active')

                }
            })
        })


    </script>

3.css

*{
    padding: 0;
    margin: 0;
}
ul li,ol li{
    list-style-type: none;
}
header{
     width: 100%;
     height: 44px;
      display: flex;
      justify-content:center;
      align-items: center; 
      border-bottom: 1px solid #ccc; 
      position: fixed;
      top: 0; 
      left: 0; 
      z-index: 999999999999;
      /* 头部添加背景颜色意为main部分中ul滑动时隐藏内容 */
      background-color: #fff; 
}
.arrow{
    width: 5%;
    text-align: center;
    padding-left: 5%;
}
/* 左箭头 */
.left{
    border: 2px solid #000;
    width: 10px;
    height: 10px;
    border-left-color: transparent;
    border-top-color: transparent;
    transform: rotate(135deg);
}
.search{
    width: 80%;
    height: 30px;
    background-color: #cccccc;
    border-radius: 50px;
    line-height: 30px;
    display: flex;
    align-items: center;
    text-align: center;
}
.search-img{
    width: 10%;
    height: 25px;
    padding-left: 10px;
}
.search img{
    width: 25px;
    height: 25px;
}
.search input{
    width: 80%;
    outline:none;
    background-color: #cccccc;
    
}
/* 修改input框中placeholder的样式 */
.search input::placeholder {
    color: rgba(0,0,0,0.6);
    font-size: 12px;
}
/* 去除input框的默认样式 */
input {
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
    background-color: transparent;
    font-size: inherit;
}

input:focus {
    outline: none;
}
.dian{
    width: 10%;
    height: 44px;
    line-height: 35px;
    text-align: center;
    font-size: 20px;
    color: #000;
}
main{
    margin-top: 44px;
    height: 100%;
    display: flex;
}
.left-section{
    width: 25%;
    height: auto;
    min-height: 100%;
    overflow-y: hidden;
    border-right:1px solid rgba(0,0,0,0.1);
    background-color: #ccc;
}
ul{
    overflow-y: hidden;
    height: auto;
}
ul li{
    width: 100%;
    height: 46px;
    text-align: center;
    line-height: 46px;
}
.active{
    color: red;
    background-color: white;
}
.right-section{
    width: 75%;
    height: auto;
    min-height: auto;
    /* 定位，将右边部分的代码定位到右边,否则会出现内容滚动的问题 */
    position: fixed;
    top: 44px;
    left: 25%;
}
.right-section div{
    width: 100%;
    white-space: pre-line;
}