当我向下滚动页面时，如何使我的固定“移动导航”栏出现？答案

【问题标题】：How to make my fixed "mobile-nav" bar appear when I scroll down the page?当我向下滚动页面时，如何使我的固定“移动导航”栏出现？
【发布时间】：2015-10-06 14:58:17
【问题描述】：

#web-nav {
  display: none;
}
#mobile-nav {
  width: 100%;
  background: url(img/menu-bg.png) repeat;
  height: 70px;
  display: block;
  position: fixed;
  z-index: 50;
  top: 0px;
}

<nav id="mobile-nav">
  <a href="index.html">
    <img class="logo" src="admin/wp-content/themes/mame/assets/img/sicklehammer.png" />
  </a>
  <img class="drop-nav" src="open.png" />
</nav>
<nav id="mobile-expand">
  <img class="logo" src="logo.png" />
  <img class="close" src="img/close.png" />
  <div id="hidden-nav">

  </div>

  <ul id="menu">

    <li><a href="index.html">Home</a>
    </li>
    <li><a href="work/index.html">Work</a>
    </li>
    <li><a href="about/index.html">About</a>
    </li>
    <li><a href="blog/index.html">Blog</a>
    </li>
    <li><a href="contact/index.html">Contact</a>
    </li>
    <ul class="work-subs">

      <li><a href="/index.html">Movies</a>
      </li>
      <li><a href="/index.html">Photos</a>
      </li>
    </ul>
  </ul>
</nav>

【问题讨论】：

首先，你不能把<ul>直接放在另一个<ul>里面；如果您真的希望它“嵌套”，请将其放在一对<li> 标签中......
谢谢。模板的设计者已经设计了一些错误的模板，但是我对“编码”的了解很差。恐怕如果我执行一些“不需要的”更改如果我按照您的建议进行。我希望我内心有人可以得到帮助。
听起来您才刚刚开始使用 Web 开发。您将需要学习很多关于 Javascript 的知识，但如果没有良好的 HTML/CSS 技能（即使模板应该是别人的工作），您也会迷失方向。我已经向一些人推荐了这个tutorial，他们发现它很有帮助。我认为它的组织和解释都很好，但不包括 Javascript。有很多资源，但我没有推荐。祝你好运！
很棒的指南！谢谢！

标签： scroll fixed fade nav

【解决方案1】：

这是我用的

<script> 
  $('#main-nav').hide();
  $(window).scroll(function () {
    if ($(this).scrollTop() > 750) {
       $('#main-nav').fadeIn();
    } else {
       $('#main-nav').fadeOut();
    }
  });
</script>

【讨论】：

谢谢。你能告诉我在哪里粘贴这段代码吗？抱歉，我不熟悉 java 脚本代码。
Tumaj，如果你是 javascript 新手，我认为你需要的不仅仅是这个简单的代码 sn-p，所以我担心“粘贴到哪里”它已经出来了您原始问题的范围。 :) 还要注意@simon 的解决方案取决于jQuery 库。
在页面正文中添加此代码：您还需要在页面头部添加 jquery.min.js。
我必须同意 Lambart 的观点，如果您提出这样的问题，您将很难设置所有内容。