下拉一定高度顶部导航条浮动并固定显示

小秋同学 11-07 12:50:58 学习园地
摘要: 下拉一定高度顶部导航条浮动并固定浏览器下拉滚动到一定高度后,头部导航出现并固定浮动。<body style="background:#f4f4f4;min-height:2000px;">    &摘要: 下拉一定高度顶部导航条浮动并固定浏览器下拉滚动到一定高度后,头部导航出现并固定浮动。<body style="background:#f4f4f4;min-height:2000px;">    &

下拉一定高度顶部导航条浮动并固定
浏览器下拉滚动到一定高度后,头部导航出现并固定浮动。



<body style="background:#f4f4f4;min-height:2000px;">

    <nav class="nav">

        <div class="nav-content">

            <div class="flex nav-top">

                <div>logo</div>

                <div class="item">

                    <input type="text" class="nav-search" placeholder="请输入搜索内容">

                </div>

                <div>购物车</div>

            </div>

            <div class="nav-list">

                <ul>

                    <li>网站首页</li>

                    <li>任务要闻</li>

                    <li>今日头条</li>

                    <li>意见专栏</li>

                    <li>母婴儿童</li>

                    <li>汽车制造</li>

                </ul>

            </div>

        </div>

    </nav>

    <div class="hide bg-blue">

        <div class="flex nav-top" style="padding-top:0;">

            <div>logo</div>

            <div class="item">

                <input type="text" class="nav-search" placeholder="请输入搜索内容">

            </div>

            <div>购物车</div>

        </div>

    </div>

    </body>


CSS部分

.nav {

            background-color: #fff;

            -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);

            box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);

            height: 200px;

        }


        .nav-content {

            width: 1200px;

            margin: 0 auto;

            overflow: hidden;

        }


        .nav-list {

            overflow: hidden;

            padding-top: 50px;

        }


        .nav-list li {

            width: 200px;

            text-align: center;

            font-weight: 600;

            float: left;

            color: #333

        }


        .nav-top {

            padding-top: 50px;

            text-align: center;

        }


        .nav-search {

            border: 1px #ececec solid;

            width: 500px;

            height: 50px;

            text-indent: 10px;

        }


        .search-fix {

            display: block!important;

            position: fixed;

            z-index: 100;

            left: 0;

            top: 0;

            width: 100%;

            border-bottom: 2px solid #f10214;

            background-color: #fff;

            -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);

            box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);

            -webkit-animation: searchTop .3s ease-in-out;

            animation: searchTop .3s ease-in-out

        }


  


        @-webkit-keyframes searchTop {

            0% {

                top: -50px

            }


            to {

                top: 0

            }

        }


        @keyframes searchTop {

            0% {

                top: -50px

            }


            to {

                top: 0

            }

        }

js部分

   document.addEventListener("scroll",function(){

            var downSearch = document.querySelector(".bg-blue");

            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 

            if(scrollTop >= 350){

                downSearch.classList.add("search-fix")

            }else if(scrollTop <= 250){

                downSearch.classList.remove("search-fix")

            }

            console.log(scrollTop);

        })


文章版权及转载声明:

编辑:小秋同学本文地址:https://www.qiuhai.com/study/843.html发布于 11-07 12:50:58
文章转载或复制请以超链接形式并注明出处学习吧_一个不错的学习网站
本站文章如没有特殊说明,均采集网上收集,若要转载请务必注明出处,尊重他人劳动成果共创和谐网络环境。 声明:某些文章来源于网络,所采集的到信息本站只为传递信息和分享,不做任何双方证明,也不承担任何法律责任。 文章内容若侵犯你的权益,请联系本站客服删除!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享
加入收藏

发表评论
加载中~