Javascript 向上滚动应显示导航

在我的网站导航中，我试图使标题看起来像这样，下面的工作方式是，当你向上滚动时，它会显示菜单，当你向下滚动时，它会隐藏，当你在页面顶部时，它会一直显示

但到目前为止，我的导航是粘性的，就像你向下滚动和向上滚动时显示的那样，它保持在那里

我的代码是用于导航的

HTML代码

<header id="header"> 
    <!-- start Navbar (Header) -->
    <nav class="navbar navbar-primary navbar-fixed-top navbar-sticky-function">
      <div id="top-header">
        <div class="container">
          <div class="row">
            <div class="col-xs-12 col-sm-6 clearfix">
              <div class="top-header-widget welcome">
                <p>Welcome Guest | <a href="javascript:void(0);" class="linkApply">Apply</a></p>
              </div>
            </div>
            <div class="col-sm-6 clearfix hidden-xs">
              <div class="top-header-widget pull-right"> <i class="fa fa-phone"></i> call (111) 255-4433 </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="navbar-header"> <a class="navbar-brand" href="index.html"><img class="imgcontrol" src="images/o.png" alt="Maike your Car Guy" border="0" /></a></div>
        <div id="navbar" class="collapse navbar-collapse navbar-arrow pull-left">
          <ul class="nav navbar-nav" id="responsive-menu">
            <li> <a href="#">About</a>
              <ul>
                <li><a href="index.html#aboutme">Why?</a></li>
              </ul>
            </li>
            <li> <a href="#">Resources</a>
              <ul>
                <li><a href="howitworks.html">How it works</a></li>
                <li><a href="videos.html"> Videos</a></li>
              </ul>
            </li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="apply.html" class="onred">Apply</a></li>
          </ul>
        </div>
        <!--/.nav-collapse --> 

      </div>
      <div id="slicknav-mobile"></div>
    </nav>
    <!-- end Navbar (Header) --> 

  </header>

这是我的JS

/**
     * Main Menu Slide Down Effect
     */

    // Mouse-enter dropdown
    $('#navbar li').on("mouseenter", function() {
            $(this).find('ul').first().stop(true, true).delay(350).slideDown(500, 'easeInOutQuad');
    });

    // Mouse-leave dropdown
    $('#navbar li').on("mouseleave", function() {
            $(this).find('ul').first().stop(true, true).delay(100).slideUp(150, 'easeInOutQuad');
    });



    /**
     * Effect to Bootstrap Dropdown
     */
    $('.bt-dropdown-click').on('show.bs.dropdown', function(e) {   
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown(500, 'easeInOutQuad'); 
    }); 
    $('.bt-dropdown-click').on('hide.bs.dropdown', function(e) { 
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp(250, 'easeInOutQuad'); 
    });

---

如果没有Javascript，您将无法达到这种效果。我建议您使用这个效果很好的小部件：

因为您没有包含javascript，所以无法看到您在做什么

交互的前提是要在窗口上侦听滚动事件（使用javascript），并根据滚动的方向添加或删除相应的CSS类（这将使其在视图外向上或向下移动）

要确定滚动方向，请检查以下内容：

编辑：您想要收听的事件是滚动，并且您想要在窗口上收听它

$(window).on('scroll',function(e){
    //if scroll direction = up, add class to show nav bar (including animations)
    //else remove class if nav hasClass
});

您应该有一个类，通过更改

top

位置使其可见。默认情况下，它应该是负数，因此默认情况下它是隐藏的，并将css转换添加到nav的默认样式中。“show”类将只具有新的

顶部

位置。应该是零。当导航栏隐藏或显示时，这将是唯一的转换属性

---

当添加类以显示导航栏时，它会将

top

属性向下滑动到0，当删除类以隐藏它时，top属性向上滑动到负数。此负数应至少等于导航栏的高度，或更高，以便在屏幕外正确隐藏

哦，让我补充一下，请检查，我已经添加了脚本，这是我正在寻找的，但如何将其集成到脚本中。网站上的文档非常好。强制步骤是：将class.headloom添加到标题：

…

在HTML中包含headloom脚本。通过添加以下内容加载脚本：

var myElement=document.querySelector（“header”）；var净空=新净空（myElement）；headloom.init（）
$(window).on('scroll',function(e){
    //if scroll direction = up, add class to show nav bar (including animations)
    //else remove class if nav hasClass
});