页面滑动到一定幅度,改变导航条颜色

最新推荐文章于 2024-07-04 14:53:34 发布

多才多多

最新推荐文章于 2024-07-04 14:53:34 发布

阅读量602

点赞数

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

本文链接：https://blog.csdn.net/u010456602/article/details/129238020

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

该文章介绍了一个需求，即当页面向上滑动200像素后，导航条从默认背景色变为有颜色的背景。通过JavaScript监听滚动事件，当滚动位置超过200像素时，给导航条元素添加data-fixed属性，并设定CSS样式使其固定在顶部并改变背景。CSS代码定义了两种状态下的背景效果。

摘要由CSDN通过智能技术生成

有个需求:导航条是默认背景色, 页面向上滑动后,导航条变为有颜色的背景
思路:
js判断滚动条滑动到200像素后
动态给元素设置一个属性data-fixed,
给属性设置个css样式

html

    <div class="main-header" id="main_header">
        <div class="menu">
            <div class="nav">
                <img src="/static/images/logo.png" class="nav-item logo-img">
                <a class="nav-item" href="#">首页</a>
                <a class="nav-item" href="#">展厅</a>
                <a class="nav-item" href="#">资讯</a>
                <a class="nav-item" href="#">加盟</a>
            </div>
        </div>
    </div>

css

    .main-header{
        background-color: rgba(0,0,0,0.1);
        background-image: none;
    }
    .main-header[data-fixed='fixed']{
        position: fixed;top:0;left: 0;right: 0;z-index: 3;
        background-image: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%);
    }


    <script>
        //本文来自csdn博客, 禁止采集
        function ceiling(obj){
            var ot = 200;
            document.onscroll = function(){
                var st=document.body.scrollTop || document.documentElement.scrollTop;
                obj.setAttribute("data-fixed",st >= ot ? "fixed":'');
            }
        }
        window.onload=function () {
            var wrap = document.getElementById('main_header');
            ceiling(wrap);
        }
    </script>