Question

我在页面中间有一个粘性导航（议程日），当粘性导航的内容向下滚动时，该导航将变为固定状态。导航是Bootstrap选项卡，这就是HTML的样子：

<ul class="nav nav-tabs followMeBar agenda-days text-center">
  <li class="active"><a class="day" href="#1" data-toggle="tab">Day 1</a></li>
  <li><a class="day" href="#2" data-toggle="tab">Day 2</a></li>
  <li><a class="day" href="#3" data-toggle="tab">Day 3</a></li>
</ul>

并且选项卡内容位于具有相应ID的div中，如下所示：

<div class="tab-pane" id="1">
    <h3>Day 1</h3>

除了一件事，一切都工作得很好，如果你在第1天向下滚动一半，然后点击第2天，内容就会切换到第2天，但你仍然向下滚动一半。如何将第1天，第2天，第3天切换内容并滚动到议程内容的顶部（而不是页面顶部）。

以下是我的完整代码示例：https://codepen.io/anon/pen/POvGPr

Answer 1

首先将类添加到日期链接的li容器中。第二个例如在天导航之前添加一个选择器。

<div class="test"></div>

<li class="active scroll-top"><a  href="#1" data-toggle="tab">Day 1</a></li>

  $('.scroll-top').click(function(){
     $('html,body').animate({
       scrollTop: $(".test").offset().top},
       'slow');
  });

粘性导航并滚动到顶部混淆

1 个答案: