导航fixed定位下拉

<div class="header hidden-xs hidden-sm">
    <div class="pc-con pad60 flex a-center j-space-between wrap">
        <div class="h-aa" {{ app('visual').url('section', 100004) }}>
            {% snippet "nav" data=nav %}
        </div>

        <div class="logo" {{ app('visual').url('config', 'logoimg' ) }}>
            <a href="{{ url_index }}"><img alt="{{ keyword[0] }}" src="{{ config('logoimg') | img_format }}" /></a>
        </div>

        <div class="h-bb flex a-center">
            <div class="h_nav" {{ app('visual').url('section', 44889) }}>
                {% snippet "nav2" data=nav2 %}
            </div>
            <div class="h_ss">
                <form method="get" name="formsearch" class="flex a-center" id="formsearch2" action="{{ url_search }}">
                    <input type="text" name="wd" id="keyword" placeholder="请输入关键词" />
                    <input type="submit" id="s_btn" value="" />
                </form>
            </div>
            <div class="h_lang flex a-center">
                <a href="">EN</a>
                <a href="">CN</a>
            </div>
        </div>

    </div>
</div>

<script type="text/javascript">
    var prevScrollpos = window.pageYOffset;
    window.onscroll = function() {
        var currentScrollPos = window.pageYOffset;
        if (prevScrollpos > currentScrollPos) {
            document.querySelector(".header").classList.remove("hidden2");
        } else {
            document.querySelector(".header").classList.add("hidden2");
        }
        prevScrollpos = currentScrollPos;
    };

     $(function() {
        $(".x-menu>li.sub").hover(function() {
            $(this).find('.unav_show').stop().animate({ height: '580px' }, 600);
        }, function() {
            $(this).find('.unav_show').stop().animate({ height: '0' }, 600);
        });
    });
</script>

.header{position:fixed;top:0;left:0;z-index:9999;width:100%;background-color:rgba(30,30,30,.95);transition:top .3s}
.pad60{padding-left:3.125vw;padding-right:3.125vw}
.pc-con{height:77px}
.header.hidden2{top:-100px;transition:top .3s}
.logo{position:relative}
.logo a{display:block}
.logo a img{max-width:100%;max-height:22px}
.h_ss{margin-left:30px}
.h_ss #formsearch2{position:relative;z-index:9999;width:115px;background:0 0;border:1px solid #aaa;border-radius:20px}
.h_ss #formsearch2 input{outline:0;border:none;background:0 0;font-size:0;height:22px}
.h_ss #formsearch2 #s_btn{width:30px;background:url(//cdn.myxypt.com/94191a9f/23/09/8430f06540906d62a3aa6ef4a6fa1e6910270f9c.png) no-repeat center}
.h_ss #formsearch2 #keyword{width:calc(100% - 30px);color:#aaa;padding-left:10px;font-size:12px}
.h_ss #formsearch2 input::-webkit-input-placeholder{color:#aaa}
.h_lang{position:relative}
.h_lang a{margin-left:22px;display:block;font-size:14px;color:#aaa;text-transform:uppercase}
.h_lang a:hover{color:#7d7d7d}