十三亿人都能看懂的导航栏吸顶+tab

最新推荐文章于 2024-04-28 17:18:09 发布

weixin_34323858

最新推荐文章于 2024-04-28 17:18:09 发布

阅读量1.7k

点赞数

文章标签： ui javascript ViewUI

原文链接：https://juejin.im/post/5be3f711e51d45119b4cf5f6

版权

设计思路

要想出现滚动效果,就需要让里面的内容高度大于外面内容的高度\

<body>    <div class="box">        <div class="top">            <img src="../img/ad.jpg" alt="">        </div>        <div class="content">            <ul class="ul">                <li class="active">财经</li>                <li>新闻</li>                <li>娱乐</li>                <li>八卦</li>                <li>直播</li>            </ul>            <div class="desc">                <section class="active">                    这个表情包，最初其实来源于王思聪在英雄联盟 S8全球总决赛上，                    为自家战队应援时被抓拍到的一张照片。                </section>                <section>                    相信很多人看到满屏的“ IG 牛×”都是一脸懵的，                    但在搞懂什么是 IG 之前，你可能需要稍微了解下什么叫英雄联盟。                </section>                <section>                    英雄联盟，英文名是 League of Legends ，                    简称为 lol ，黑话里就是大家常说的“撸啊撸”。                </section>                <section>                    每一年拳头公司举办的“全球总决赛”，其重量级可类比于足球界的世界杯，                    这个比赛也被简称为 S 赛，S 是 season 的意思，今年是第8个赛季所以称为 S8                </section>                <section>                    被韩国赛区统治的恐惧，就像一座大山一样横亘在眼前。                    即使去年的 S7 决赛在中国鸟巢举行，但最终的奖杯却还是被韩国赛区摘去。                </section>            </div>        </div>    </div> </body>

复制代码

    <style>        *{            padding: 0;            margin: 0;        }        body{            height: 10000px;        }        .box{            width: 650px;            margin: 0 auto;            height: 800px;          }        img{            overflow: hidden;            display: block;        }        .content{            width: 650px;            height:60px;            background: #ddd;        }        ul{            list-style: none;            width: 650px;            height: 60px;            line-height:60px;            text-align: center;            display: flex;        }        ul>li{            width: 130px;            height: 60px;            cursor: pointer;            user-select: none;        }        .fixed{            position: fixed;            z-index: 998;            top: 0;        }        .content ul li.active{            background: #f00;;            color: #fff;        }       .desc>section{            display: none;        }        .desc .active{            display: block;            line-height: 1.5;            margin-top: 20px;        }    </style>复制代码

<script src="../jquery.js"></script>  //引入jquery<script>   $(function(){       //设置导航栏吸顶      $(document).scroll(function(){            let scrollTop = $(document).scrollTop(); //获取滚动的值            let  height  = $('.top').outerHeight(true) //获取顶部的高度            // console.log(scrollTop);            if(scrollTop >= height ){                $(".content").addClass("fixed")            }else{                  $(".content").removeClass("fixed")            }         });
       //设置tab选项卡       $(".ul").children().click(function () {          let index = $(this).index()          $(this).addClass("active").siblings().removeClass("active")          $(".desc").children().eq(index).addClass('active').siblings().removeClass("active")                  })   })</script>复制代码