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

最新推荐文章于 2021-07-15 08:19:53 发布

弱鸡灬

最新推荐文章于 2021-07-15 08:19:53 发布

阅读量788

点赞数

本文链接：https://blog.csdn.net/u013557783/article/details/103224277

版权

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

<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>

.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
            }
        }

   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);
        })

弱鸡灬

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
下拉一定高度顶部导航条浮动并固定

下拉一定高度顶部导航条浮动并固定浏览器下拉滚动到一定高度后，头部导航出现并固定浮动。<body style="background:#f4f4f4;min-height:2000px;"> <nav class="nav"> <div class="nav-content"> <div class="fl...
复制链接

扫一扫