ajax、css

let .ajax({ type: "get", url: "/a.json", async: true, success: function (data) { console.log(data);

        }
    })
    $.get("/a.json", function (data) {
        console.log('打印', data);

    })
    
    
    
    <style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .flex {
        display: flex;
    }

    .j-s {
        justify-content: space-between;
    }

    .j-c {
        justify-content: center;
    }

    .a-c {
        align-items: center;
    }

    .f-d-c {
        flex-direction: column;
    }

    .banner {
        background: url(./banner1.jpg) fixed 0 / 100% 100%;
        min-height: 600px;
        height: 100vh;
    }

    .header {
        height: 70px;
        position: fixed;
        width: 100%;
        font-size: 30px;
        display: flex;
        align-items: center;
        transition: 0.5s;
    }

    .menu {
        color: #fff;
        padding: 0 50px;
        font-size: 20px;
    }

    .menu li {
        padding: 0 10px;
        margin: 0 20px;
        letter-spacing: 5px;
        text-align: center;
        position: relative;
    }

    .menu li::after {
        height: 3px;
        content: '';
        display: block;
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        background: orange;
        transition: 0.5s;
    }

    .menu li.active::after {
        width: 100%;
    }

    .menu li:hover::after {
        width: 100%;
    }


    .header.zz ul {
        color: #000;
    }

    .header::after {
        content: '';
        display: block;
        position: absolute;
        background: #fff;
        width: 100%;
        height: 0;
        top: 0;
        left: 0;
        transition: 0.5s;
        border-bottom: 1px solid #eee;
    }

    .header.zz::after {
        height: 100%;
    }

    .content {
        width: 100%;
        padding: 0 20px;
        position: absolute;
        z-index: 9999
    }
     <div class="header ">
    <div class="content flex a-c j-s">
        <div>华科互动</div>
        <ul class="menu flex a-c j-s">
            <li class="active">菜单</li>
            <li>菜单</li>
            <li>菜单</li>
            <li>菜单</li>
        </ul>
    </div>
</div>
<div class="banner"></div>
<div style="background:red;height:2000px"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>

    $(function () {
        $(window).scroll(function () {
            if ($(window).scrollTop() > 200) {
                $('.header').addClass('zz')
            } else {
                $('.header').removeClass('zz')
            }
        })
    })
</script>