js简单实现京东的电梯导航

最新推荐文章于 2023-12-01 11:40:08 发布

诗霖雪

最新推荐文章于 2023-12-01 11:40:08 发布

阅读量756

点赞数 17

分类专栏： js案例文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m0_56713342/article/details/134585946

版权

js案例专栏收录该内容

14 篇文章 1 订阅

订阅专栏

思路：首先先搭建好结构，在写css样式

由于京东本身一开始是看不见下拉的导航，就把这导航一开始用固定定位，并使其完全不显示页面，用top的值为-100%，

js，给窗口设置窗口滚动事件，根据页面被卷去的尺寸document.documentElement.scrollTop的值来判断，下拉导航什么时候出现，就设置其top值为0，不满足时保持原样。

css代码

  *{
            padding: 0;
            margin: 0;
        }
        .header {
            height: 80px;
            background-color: bisque;
        }

        .search {
            width: 1120px;
            height: 100px;
            margin: 0 auto;
            background-color: rgb(67, 165, 42);
        }
/* 导航区 */

        .daohang {
            height: 50px;
            background-color: pink;
            border-bottom: 5px solid red;
            transition: all 1s;
            /* 设置固定定位，位置为 -100%*/
            position: fixed;
            top: -100%;
            width: 100%;

        }

        .main {
            width: 1120px;
            height: 3000px;
            background-color: darkcyan;
            margin: 0 auto;
        }

        .box {
            width: 1120px;
            height: 100%;
            background-color: white;
        
            margin: 0 auto;
        }

        .left img {
            width: 125px;
            height: 40px;
        }

      .left{
        float: left;
        margin-right: 30px;
      }
      .right{
        float: left;
      }
      input{
        width: 500px;
        height: 28px;
        outline: none;
        border: none;
        float: left;
        /* background-color: aquamarine; */
       padding-left: 10px;
      }
      button{
        width: 60px;
        height: 30px;
        outline: none;
        border: none;
        float: right;
        color: white;
    
        background-color: rgb(225, 36, 26);
      }
      .s{
        width: 574px;
        height: 30px;
        border: 2px solid rgb(226, 35, 26);
      }
   .s{
    margin-top: 10px;
   }

html代码

    <div class="wrapper">
        <div class="header"></div>

        <div class="daohang">
            <div class="box">
                <div class="left">
                    <img src="./images/jindong.png" alt="">

                </div>
                <div class="right">
                    <div class="s">
                        <input type="text" placeholder="飞利浦电动牙刷"><button>搜索</button>
                    </div>

                </div>
            </div>

        </div>
        <div class="search"></div>
        <div class="main"></div>
    </div>

js代码

 const daohang=document.querySelector('.daohang')
        const head=document.querySelector('.header')
        //设置窗口滚动事件
        window.addEventListener('scroll',function(){
            //如果页面被卷去的尺寸大于800，就显示下拉导航，否则继续保持原样
            if(document.documentElement.scrollTop>800){
                daohang.style.top=0
            }else{
               daohang.style.top='-100%'
            }
        })

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .header {
            height: 80px;
            background-color: bisque;
        }

        .search {
            width: 1120px;
            height: 100px;
            margin: 0 auto;
            background-color: rgb(67, 165, 42);
        }
/* 导航区 */

        .daohang {
            height: 50px;
            background-color: pink;
            border-bottom: 5px solid red;
            transition: all 1s;
            /* 设置固定定位，位置为 -100%*/
            position: fixed;
            top: -100%;
            width: 100%;

        }

        .main {
            width: 1120px;
            height: 3000px;
            background-color: darkcyan;
            margin: 0 auto;
        }

        .box {
            width: 1120px;
            height: 100%;
            background-color: white;
        
            margin: 0 auto;
        }

        .left img {
            width: 125px;
            height: 40px;
        }

      .left{
        float: left;
        margin-right: 30px;
      }
      .right{
        float: left;
      }
      input{
        width: 500px;
        height: 28px;
        outline: none;
        border: none;
        float: left;
        /* background-color: aquamarine; */
       padding-left: 10px;
      }
      button{
        width: 60px;
        height: 30px;
        outline: none;
        border: none;
        float: right;
        color: white;
    
        background-color: rgb(225, 36, 26);
      }
      .s{
        width: 574px;
        height: 30px;
        border: 2px solid rgb(226, 35, 26);
      }
   .s{
    margin-top: 10px;
   }

    </style>
</head>

<body>
    <div class="wrapper">
        <div class="header"></div>

        <div class="daohang">
            <div class="box">
                <div class="left">
                    <img src="./images/jindong.png" alt="">

                </div>
                <div class="right">
                    <div class="s">
                        <input type="text" placeholder="飞利浦电动牙刷"><button>搜索</button>
                    </div>

                </div>
            </div>

        </div>
        <div class="search"></div>
        <div class="main"></div>
    </div>
    <script>
        const daohang=document.querySelector('.daohang')
        const head=document.querySelector('.header')
        //设置窗口滚动事件
        window.addEventListener('scroll',function(){
            //如果页面被卷去的尺寸大于800，就显示下拉导航，否则继续保持原样
            if(document.documentElement.scrollTop>800){
                daohang.style.top=0
            }else{
               daohang.style.top='-100%'
            }
        })
    </script>
</body>

</html>

效果图：

诗霖雪

关注

17
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
js简单实现京东的电梯导航

思路：首先先搭建好结构，在写css样式由于京东本身一开始是看不见下拉的导航，就把这导航一开始用固定定位，并使其完全不显示页面，用top的值为-100%，js，给窗口设置窗口滚动事件，根据页面被卷去的尺寸document.documentElement.scrollTop的值来判断，下拉导航什么时候出现，就设置其top值为0，不满足时保持原样。
复制链接

扫一扫