jquery - 修复在 Bootstrap 选项卡上无法正常工作的问题

Question

我在 bootstrap 配置文件选项卡上为元素使用了自定义词缀。问题是只有当选项卡在文档加载时处于事件状态时，词缀才能正常工作。否则它不能正常工作。但我希望第一个选项卡应该在加载时处于事件状态。如果我单击第二个选项卡(配置文件)，词缀应该可以正常工作。

$(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>

Answer 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>