两部分的滚动导航【原创】

查看演示 下载资源 下载积分： 30 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需远程调用一个CSS样式文件，并设置好页面元素的样式，代码如下：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style type="text/css">
html {
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}
.wrapper .side-panel {
  width: 250px;
  position: fixed;
  top: 0;
  bottom: 0;
  border-right: 1px solid #B8B8B8;
  background-color: #F1F1F1;
}
.wrapper .side-panel .menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #A0A0A0;
}
.wrapper .side-panel .menu li a.active {
  color: white;
  background-color: #33BAEF;
}
.wrapper .main-panel {
  width: calc(100% - 251px);
  margin-left: 251px;
}
.wrapper .main-panel section .followWrap {
  margin-bottom: -36px;
}
.wrapper .main-panel .sub-navigation {
  background: #EBF5F7;
  position: relative;
  z-index: 1;
  padding: 0 10px;
  height: 36px;
}
.wrapper .main-panel .sub-navigation.fixed {
  position: fixed;
  top: 0;
  right: 0;
  width: calc(100% - 251px);
  box-sizing: border-box;
  z-index: 0;
}
.wrapper .main-panel .sub-navigation.fixed.absolute {
  position: absolute;
}
.wrapper .main-panel .sub-navigation a {
  display: block;
  float: left;
  padding: 10px;
  color: #575757;
  text-decoration: none;
}
.wrapper .main-panel .sub-navigation a.active {
  color: #33BAEF;
}
.wrapper .main-panel .setting-area section {
  min-height: 500px;
}
.wrapper .main-panel .setting-area section > h4 {
  padding: 46px 0 20px 20px;
}
</style>

页面的body部分，对照演示效果就能看出，其实结构并不复杂，代码如下：

<div class="wrapper">
  <div class="side-panel">
    <ul class="menu">
      <li><a class="active" href="#section-1">要求</a></li>
      <li><a href="#section-2">信念</a></li>
      <li><a href="#section-3">接受</a></li>
      <li><a href="#section-4">实现</a></li>
    </ul>
  </div>
  <div class="main-panel">
    <section id="section-1">
      <div class="sub-navigation menu">
        <a class="active" href="#subsection-1a">对宇宙发出指令</a>
        <a href="#subsection-1b">这是一个很有意思的过程</a>
      </div>
      <div class="setting-area">
        <section id="subsection-1a">
          <h4>第一个阶段，是做出要求，对宇宙发出指令，让宇宙了解你想要些什么，宇宙就会自动回应你的想法。</h4>
        </section>
        <section id="subsection-1b">
          <h4>这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。</h4>
        </section>
      </div>
    </section>
    <section id="section-2">
      <div class="sub-navigation menu">
        <a href="#subsection-2a">你要相信你已经拥有它了</a>
        <a href="#subsection-2b">它就要实现了</a>
      </div>
      <div class="setting-area">
        <section id="subsection-2a">
          <h4>第二步是信念。你要相信你已经拥有它了。要有一种毫不动摇的信念，就是我的说法，要相信还没有实现的事，“你的愿望就是我的命令”，宇宙就会开始运作安排，从而满足你心中的愿望。</h4>
        </section>
        <section id="subsection-2b">
          <h4>大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”</h4>
        </section>
      </div>
    </section>
    <section id="section-3">
      <div class="sub-navigation menu">
        <a href="#subsection-3a">开始感觉好极了</a>
        <a href="#subsection-3b">尝试去做一切你能做的事</a>
      </div>
      <div class="setting-area">
        <section id="subsection-3a">
          <h4>第三步，就是这个过程最后一步，接受。开始感觉好极了，想想要是你想要的事物已经出现，那会是什么感觉。</h4>
        </section>
        <section id="subsection-3b">
          <h4>当你感觉好的时候，你就是把自己和你要的事物放在同一个频率上。尝试去做一切你能做的事，帮助自己具有拥有它们的感觉。无论你能做什么，只要去做，就有助于把这些东西吸引过来。</h4>
        </section>
      </div>
    </section>
    <section id="section-4">
      <div class="sub-navigation menu">
        <a href="#subsection-4a">当你看到自己想要的结果</a>
        <a href="#subsection-4b">你会想要实现跟多的愿望</a>
      </div>
      <div class="setting-area">
        <section id="subsection-4a">
          <h4>当你看到自己想要的结果时，你会大吃一惊的哦。</h4>
        </section>
        <section id="subsection-4b">
          <h4>如果你实现了一个愿望，相信你自己，你会想要实现更多愿望的哦。</h4>
        </section>
      </div>
    </section>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
</div>

页面的底部，需远程调用jQuery库，并引入本地的JS文件，代码如下：

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>