Top menu made with jQuery

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/LXJRQJ/article/details/89218423

css---样式
.zdcd{
    height: 50px;
    width: 100%;
    background: rgba(221,39,39,.95);
    position: fixed;
    display: none;
}
.lol img{
    margin: 5px 0 0;
    height: 40px;
}
.ssk{
    margin: 9px 0 0 60px;
    width: 660px;
    height: 32px;
}
#fix .tep{
    width: 565px;
    height: 33px;
    line-height: 33px;
    text-indent: 10px;
    border: 3px solid #c40000;
    font-size: 14px;
}
.zdcd .pxp{
    margin-top: 36px;
    width: 566px;
    position: absolute;
    height: auto;
    border-left: 1px solid rgba(0,0,0,.11);
    border-right: 1px solid rgba(0,0,0,.11);
    left: 674px;
}
.pzp{
    list-style: none;
}
.oox{
    width: 86px;
    height: 39px;
    background: #c40000;
    color: #fff;
    line-height: 39px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-family: "Microsoft Yahei";
    text-align: center;
}

置顶菜单--HTML
<div class="zdcd" style="top: 0; display: block;">
        <div class="mp">
            <a href="#" class="lol">
                <img src="img/whiteLogo.png" alt class="fl">
            </a>
            <div class="ssk fl" id="fix">
                <div class="oos">
                    <input type="text" name="query" placeholder="茅台飞天" class="tep fl" style="border-radius: 3px 0px 0px 3px;">
                    <div class="pxp">
                        <ul class="pzp"></ul>
                    </div>
                    <div class="oox fl">搜索</div>
                </div>
            </div>
        </div>
    </div>

JS----写法
$(function () {
    $(window).scroll(function () {
        var nowTop = $(document).scrollTop();
        console.log(nowTop)
        if(nowTop > 820){
            $('.zdcd').css({
                position: 'fixed',
                left:'50%',
                top:0,
                marginLeft:'-50%'
            });
        }else {
            $('.zdcd').css({
                position: 'static',
                marginLeft: 'auto'
            })
        }
    })
})

effect