缀在“引导程序”选项卡上无法正常工作

时间：2019-02-08 12:09:33

标签： jquery html5 twitter-bootstrap css3

我在引导配置文件选项卡上为元素使用了自定义缀。问题在于，仅当标签在文档加载时处于活动状态时，附件才可以正常工作。否则它不能正常工作。但我希望第一个选项卡在加载时应处于活动状态。如果我单击第二个选项卡（配置文件），则词缀应能正常工作。

$(document).ready(function() {
  var offset = $(".pagination").offset();
  var top = offset.top - 42;
  /* alert(top); */

  $(window).scroll(function() {
    if ($(document).scrollTop() > top) {
      $(".pagination").addClass("affix");
    } else {
      $(".pagination").removeClass("affix");
    }
  });
});
.affix {
  position: fixed;
  width: 100%;
  top: 42px;
  z-index: 1;
  background: #fff;
}

body {
  padding-top: 42px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://rawgit.com/bassjobsen/affix/master/assets/js/affix.js"></script>
<nav class="fixed-top" style="background:#fff;">
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
    <p>
      Lorem ipsum dolor sit amet
    </p>
  </div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor rutrum felis, non fermentum sem pulvinar in. Duis pulvinar, tellus vel suscipit suscipit, sem tortor tristique nisi, vitae pellentesque sapien dolor ut metus. Curabitur a sodales risus.
      Duis luctus lectus sit amet scelerisque aliquam. Nunc nec lectus congue ex eleifend tempus. Praesent et varius odio, sed egestas sapien. Sed quis molestie justo. Aliquam ut turpis pretium nunc tempor ornare in a est. Mauris tristique tincidunt purus,
      at laoreet quam vehicula a. Nunc vel consequat nunc, eget ullamcorper augue. Nunc lobortis, sapien vitae eleifend bibendum, libero nisl congue justo, non vestibulum lectus libero nec nulla. Suspendisse ac elit pulvinar, pellentesque magna ac, venenatis
      elit. Vivamus eget pellentesque nisl, eu sollicitudin lorem. Fusce convallis orci a blandit commodo. Nulla at luctus tortor.
    </p>
    <nav aria-label="page navigation">
      <ul class="pagination justify-content-center mb-0">
        <li class="page-item disabled">
          <a class="page-link" href="#" tabindex="-1">Previous</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">4</a></li>
        <li class="page-item"><a class="page-link" href="#">5</a></li>
        <li class="page-item"><a class="page-link" href="#">6</a></li>
        <li class="page-item"><a class="page-link" href="#">7</a></li>
        <li class="page-item"><a class="page-link" href="#">8</a></li>
        <li class="page-item"><a class="page-link" href="#">9</a></li>
        <li class="page-item">
          <a class="page-link" href="#">Next</a>
        </li>
      </ul>
    </nav>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor rutrum felis, non fermentum sem pulvinar in. Duis pulvinar, tellus vel suscipit suscipit, sem tortor tristique nisi, vitae pellentesque sapien dolor ut metus. Curabitur a sodales risus.
      Duis luctus lectus sit amet scelerisque aliquam. Nunc nec lectus congue ex eleifend tempus. Praesent et varius odio, sed egestas sapien. Sed quis molestie justo. Aliquam ut turpis pretium nunc tempor ornare in a est. Mauris tristique tincidunt purus,
      at laoreet quam vehicula a. Nunc vel consequat nunc, eget ullamcorper augue. Nunc lobortis, sapien vitae eleifend bibendum, libero nisl congue justo, non vestibulum lectus libero nec nulla. Suspendisse ac elit pulvinar, pellentesque magna ac, venenatis
      elit. Vivamus eget pellentesque nisl, eu sollicitudin lorem. Fusce convallis orci a blandit commodo. Nulla at luctus tortor.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor rutrum felis, non fermentum sem pulvinar in. Duis pulvinar, tellus vel suscipit suscipit, sem tortor tristique nisi, vitae pellentesque sapien dolor ut metus. Curabitur a sodales risus.
      Duis luctus lectus sit amet scelerisque aliquam. Nunc nec lectus congue ex eleifend tempus. Praesent et varius odio, sed egestas sapien. Sed quis molestie justo. Aliquam ut turpis pretium nunc tempor ornare in a est. Mauris tristique tincidunt purus,
      at laoreet quam vehicula a. Nunc vel consequat nunc, eget ullamcorper augue. Nunc lobortis, sapien vitae eleifend bibendum, libero nisl congue justo, non vestibulum lectus libero nec nulla. Suspendisse ac elit pulvinar, pellentesque magna ac, venenatis
      elit. Vivamus eget pellentesque nisl, eu sollicitudin lorem. Fusce convallis orci a blandit commodo. Nulla at luctus tortor.
    </p>
  </div>
</div>

1 个答案:

答案 0 :(得分：1)

您需要在制表符更改事件上更新offset和top以获得适当的值。

$(document).ready(function() {
  var offset = $(".pagination").offset();
  var top = offset.top - 42;
  /* alert(top); */

  $(window).scroll(function() {
    if ($(document).scrollTop() > top) {
      $(".pagination").addClass("affix");
    } else {
      $(".pagination").removeClass("affix");
    }
  });

  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    var target = $(e.target).attr("href") // activated tab  
    offset = $(".pagination").offset();
    top = offset.top - 42;
  });
});
.affix {
  position: fixed;
  width: 100%;
  top: 42px;
  z-index: 1;
  background: #fff;
}

body {
  padding-top: 42px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://rawgit.com/bassjobsen/affix/master/assets/js/affix.js"></script>
<nav class="fixed-top" style="background:#fff;">
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor rutrum felis, non fermentum sem pulvinar in. Duis pulvinar, tellus vel suscipit suscipit, sem tortor tristique nisi, vitae pellentesque sapien dolor ut metus. Curabitur a sodales risus.
      Duis luctus lectus sit amet scelerisque aliquam. Nunc nec lectus congue ex eleifend tempus. Praesent et varius odio, sed egestas sapien. Sed quis molestie justo. Aliquam ut turpis pretium nunc tempor ornare in a est. Mauris tristique tincidunt purus,
      at laoreet quam vehicula a. Nunc vel consequat nunc, eget ullamcorper augue. Nunc lobortis, sapien vitae eleifend bibendum, libero nisl congue justo, non vestibulum lectus libero nec nulla. Suspendisse ac elit pulvinar, pellentesque magna ac, venenatis
      elit. Vivamus eget pellentesque nisl, eu sollicitudin lorem. Fusce convallis orci a blandit commodo. Nulla at luctus tortor.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor rutrum felis, non fermentum sem pulvinar in. Duis pulvinar, tellus vel suscipit suscipit, sem tortor tristique nisi, vitae pellentesque sapien dolor ut metus. Curabitur a sodales risus.
      Duis luctus lectus sit amet scelerisque aliquam. Nunc nec lectus congue ex eleifend tempus. Praesent et varius odio, sed egestas sapien. Sed quis molestie justo. Aliquam ut turpis pretium nunc tempor ornare in a est. Mauris tristique tincidunt purus,
      at laoreet quam vehicula a. Nunc vel consequat nunc, eget ullamcorper augue. Nunc lobortis, sapien vitae eleifend bibendum, libero nisl congue justo, non vestibulum lectus libero nec nulla. Suspendisse ac elit pulvinar, pellentesque magna ac, venenatis
      elit. Vivamus eget pellentesque nisl, eu sollicitudin lorem. Fusce convallis orci a blandit commodo. Nulla at luctus tortor.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor rutrum felis, non fermentum sem pulvinar in. Duis pulvinar, tellus vel suscipit suscipit, sem tortor tristique nisi, vitae pellentesque sapien dolor ut metus. Curabitur a sodales risus.
      Duis luctus lectus sit amet scelerisque aliquam. Nunc nec lectus congue ex eleifend tempus. Praesent et varius odio, sed egestas sapien. Sed quis molestie justo. Aliquam ut turpis pretium nunc tempor ornare in a est. Mauris tristique tincidunt purus,
      at laoreet quam vehicula a. Nunc vel consequat nunc, eget ullamcorper augue. Nunc lobortis, sapien vitae eleifend bibendum, libero nisl congue justo, non vestibulum lectus libero nec nulla. Suspendisse ac elit pulvinar, pellentesque magna ac, venenatis
      elit. Vivamus eget pellentesque nisl, eu sollicitudin lorem. Fusce convallis orci a blandit commodo. Nulla at luctus tortor.
    </p>
  </div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor rutrum felis, non fermentum sem pulvinar in. Duis pulvinar, tellus vel suscipit suscipit, sem tortor tristique nisi, vitae pellentesque sapien dolor ut metus. Curabitur a sodales risus.
      Duis luctus lectus sit amet scelerisque aliquam. Nunc nec lectus congue ex eleifend tempus. Praesent et varius odio, sed egestas sapien. Sed quis molestie justo. Aliquam ut turpis pretium nunc tempor ornare in a est. Mauris tristique tincidunt purus,
      at laoreet quam vehicula a. Nunc vel consequat nunc, eget ullamcorper augue. Nunc lobortis, sapien vitae eleifend bibendum, libero nisl congue justo, non vestibulum lectus libero nec nulla. Suspendisse ac elit pulvinar, pellentesque magna ac, venenatis
      elit. Vivamus eget pellentesque nisl, eu sollicitudin lorem. Fusce convallis orci a blandit commodo. Nulla at luctus tortor.
    </p>
    <nav aria-label="page navigation">
      <ul class="pagination justify-content-center mb-0">
        <li class="page-item disabled">
          <a class="page-link" href="#" tabindex="-1">Previous</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">4</a></li>
        <li class="page-item"><a class="page-link" href="#">5</a></li>
        <li class="page-item"><a class="page-link" href="#">6</a></li>
        <li class="page-item"><a class="page-link" href="#">7</a></li>
        <li class="page-item"><a class="page-link" href="#">8</a></li>
        <li class="page-item"><a class="page-link" href="#">9</a></li>
        <li class="page-item">
          <a class="page-link" href="#">Next</a>
        </li>
      </ul>
    </nav>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor rutrum felis, non fermentum sem pulvinar in. Duis pulvinar, tellus vel suscipit suscipit, sem tortor tristique nisi, vitae pellentesque sapien dolor ut metus. Curabitur a sodales risus.
      Duis luctus lectus sit amet scelerisque aliquam. Nunc nec lectus congue ex eleifend tempus. Praesent et varius odio, sed egestas sapien. Sed quis molestie justo. Aliquam ut turpis pretium nunc tempor ornare in a est. Mauris tristique tincidunt purus,
      at laoreet quam vehicula a. Nunc vel consequat nunc, eget ullamcorper augue. Nunc lobortis, sapien vitae eleifend bibendum, libero nisl congue justo, non vestibulum lectus libero nec nulla. Suspendisse ac elit pulvinar, pellentesque magna ac, venenatis
      elit. Vivamus eget pellentesque nisl, eu sollicitudin lorem. Fusce convallis orci a blandit commodo. Nulla at luctus tortor.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor rutrum felis, non fermentum sem pulvinar in. Duis pulvinar, tellus vel suscipit suscipit, sem tortor tristique nisi, vitae pellentesque sapien dolor ut metus. Curabitur a sodales risus.
      Duis luctus lectus sit amet scelerisque aliquam. Nunc nec lectus congue ex eleifend tempus. Praesent et varius odio, sed egestas sapien. Sed quis molestie justo. Aliquam ut turpis pretium nunc tempor ornare in a est. Mauris tristique tincidunt purus,
      at laoreet quam vehicula a. Nunc vel consequat nunc, eget ullamcorper augue. Nunc lobortis, sapien vitae eleifend bibendum, libero nisl congue justo, non vestibulum lectus libero nec nulla. Suspendisse ac elit pulvinar, pellentesque magna ac, venenatis
      elit. Vivamus eget pellentesque nisl, eu sollicitudin lorem. Fusce convallis orci a blandit commodo. Nulla at luctus tortor.
    </p>
  </div>
</div>

相关问题
最新问题