javascript - 使用 jQuery 滚动 Accordion

Question

我正在使用 Accordion 标签。单击时工作正常。现在我想给它添加更多的功能。我想在完成所有五个选项卡后滚动这些选项卡应该打开/更改，然后使用 jQuery 移动到下一部分。我尝试使用 scrollTo 但没有实现。

$(document).ready(function() {

  $("ul#tabs li").click(function(e) {
    var tabIndex = $(this).index();
    if (!$(this).hasClass("active")) {
      var nthChild = tabIndex + 1;
      $("ul#tabs li.active").removeClass("active");
      $(this).addClass("active");
      $("#content-tab div.active").removeClass("active");
      $("#content-tab div:nth-child(" + nthChild + ")").addClass("active");
    } else {
      $(this).removeClass("active");
      $("#content-tab div.active").removeClass("active");
    }
  });
});

.wrapper {
  position: relative;
  width: 700px;
  height: 400px;
  margin: 0 auto;
}

ul#tabs {
  position: absolute;
  right: 0;
  list-style-type: none;
  padding: 0;
  text-align: center;
}

ul#tabs li {
  display: flex;
  flex-direction: column;
  width: 2px;
  height: 25px;
  background-color: #252525;
  border-bottom: solid 2px grey;
  padding: 5px;
  margin-bottom: 4px;
  color: #fff;
  cursor: pointer;
}

ul#tabs li:hover {
  background-color: grey;
}

ul#tabs li.active {
  background-color: #00aeef;
}

ul#tab {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#content-tab div {
  display: none;
}

#content-tab div.active {
  display: block;
}

#content-tab>div {
  text-align: center;
  background-color: #00618c;
  width: 450px;
  margin: 0 auto;
  padding: 15px 10px;
  color: #fff;
}

.block {
  width: 100%;
  height: 900px;
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <ul id="tabs">
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div id="content-tab">
    <div class="active">Convallis quis nulla pharetra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>retra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>is quis nulla pharetra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>s nulla pharetra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
  </div>
</div>
<div class="block"></div>

Answer 1

根据您的新评论，我想我明白了。如果滚动位置大于包装器 div 的高度，您需要做的是检查滚动。如果是这样，则将类更改为事件类。见下文:

<div class="wrapper" id="wrapper">

....

$(document).ready(function() {
  $("ul#tabs li").click(function(e) {
    var tabIndex = $(this).index();
    if (!$(this).hasClass("active")) {
      var nthChild = tabIndex + 1;
      $("ul#tabs li.active").removeClass("active");
      $(this).addClass("active");
      $("#content-tab div.active").removeClass("active");
      $("#content-tab div:nth-child(" + nthChild + ")").addClass("active");
    } else {
      $(this).removeClass("active");
      $("#content-tab div.active").removeClass("active");
    }
  });
  $(window).scroll(function(e) {
    var bodyRect = window.document.body.getBoundingClientRect();
    var wrapperRect = window.document.getElementById("wrapper").getBoundingClientRect();
    var bodyScrollPos = (bodyRect.top * -1);

    if(bodyScrollPos >= wrapperRect.height) {
        $("#content-tab>div").addClass("active");
      $("ul#tabs li").addClass("active");
    }
  });
});

Here is a fiddle