我可以隐藏我的平均菜单 jquery 的文本和按钮吗？

Question

所以基本上我正在为我的网站使用模板并进行相应调整。该站点将菜单栏定义为在开始时隐藏，并在向下滚动时显示。

然而，文本和菜单按钮总是在开始时出现。我不明白如何让文本（电子邮件和电话号码）隐藏在菜单栏的其余部分中。

    <header id="sticky-header" class="header-fixed">
        <div class="header-area">
            <div class="container sm-120">
                <div class="row">
                    <div class="col-md-9 col-sm-10" style="height: 70px; width: 930px">
                        <div class="col-md-4 col-sm-6">
                        <div class="logo text-upper">
                            <h6>xxxx / xxx 004 x8 / info@testsite.de</h6>
                        </div>                          
                        </div>
                        <div class="menu-area hidden-xs">
                            <div class="hamburger hamburger--collapse">
                                <div class="hamburger-box">
                                    <div class="hamburger-inner"></div>
                                </div>
                            </div>  
                            <nav class="hamburger-menu">
                                <ul class="basic-menu clearfix">
                                    <li><a href="index.html">Home</a></li>
                                    <li><a href="index.html#about">About</a></li>
                                    <li><a href="index.html#portfolio">Portfolio</a></li>
                                    <li><a href="index.html#kontakt">Kontakt</a></li>
                                    <li><a href="impressum.html">Impressum</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>


    /* menu last class added */
$('ul.basic-menu>li').slice(-2).addClass('menu-p-right');


/* TOP Menu Stick  */
win.on('scroll',function() {
if ($(this).scrollTop() > 1){  
    $('#sticky-header').addClass("sticky");
  }
  else{
    $('#sticky-header').removeClass("sticky");
  }
}); 

/* meanmenu */
 $('#mobile-nav').meanmenu({
     meanMenuContainer: '.basic-mobile-menu',
     meanScreenWidth: "767"
 });

/* hamburgers menu option  */
$('.hamburger').on('click', function() {
    $(this).toggleClass('is-active');
    $(this).next().toggleClass('nav-menu-show');
}); 

Answer 1

  $(document).on('scroll',function(){
  $(".hamburger-menu").slideDown(); //i have used slide down function for animation, you can change class or add css display type changing properties 
  })

.makescroll{height:1000px;}
.hamburger-menu{display:none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="sticky-header" class="header-fixed">
        <div class="header-area">
            <div class="container sm-120">
                <div class="row">
                    <div class="col-md-9 col-sm-10" style="height: 70px; width: 930px">
                        <div class="col-md-4 col-sm-6">
                        <div class="logo text-upper">
                            <h6>xxxx / xxx 004 x8 / info@testsite.de</h6>
                        </div>                          
                        </div>
                        <div class="menu-area hidden-xs">
                            <div class="hamburger hamburger--collapse">
                                <div class="hamburger-box">
                                    <div class="hamburger-inner"></div>
                                </div>
                            </div>  
                            <nav class="hamburger-menu">
                                <ul class="basic-menu clearfix">
                                    <li><a href="index.html">Home</a></li>
                                    <li><a href="index.html#about">About</a></li>
                                    <li><a href="index.html#portfolio">Portfolio</a></li>
                                    <li><a href="index.html#kontakt">Kontakt</a></li>
                                    <li><a href="impressum.html">Impressum</a></li>
                                </ul>
                            </nav>
                            <div class="makescroll">Extended scroll</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>