滚动到带有粘性导航和侧边栏的部分答案

【问题标题】：Scroll to section with sticky nav and sidebar滚动到带有粘性导航和侧边栏的部分
【发布时间】：2019-10-26 20:12:53
【问题描述】：

我一直在尝试使用粘性侧边栏和顶部栏滚动到文章 ID。我尝试了以下方法：

$(document).ready(function() {
  var length =
    $('aside').height() -
    $('.sidebar ul').height() +
    $('aside').offset().top -
    $('.top').height();
  var header = $('.top').height();

  $(window).scroll(function() {
    var scroll = $(this).scrollTop();
    var height = $('.sidebar ul').height() + 'px';

    if (scroll < $('aside').offset().top) {
      $('.sidebar ul').css({
        position: 'absolute',
        top: 50
      });
    } else if (scroll > length) {
      $('.sidebar ul').css({
        position: 'absolute',
        bottom: '0',
        top: 'auto'
      });
    } else {
      $('.sidebar ul').css({
        position: 'fixed',
        top: header,
        height: height
      });
    }
  });
  $(".sidebar ul li a[href^='#']").on('click', function(e) {
    e.preventDefault();
    var hash = this.hash;
    $('html, body').animate({
        scrollTop: $(hash).offset().top - 80
      }, 1000,
      function() {
        window.location.hash = hash;
      });
  });
});

html,
body {
  overflow-x: hidden;
}

a {
  transition: color 300ms;
  -webkit-transition: color 300ms;
}

header {
  height: 400px;
  background: forestgreen;
}

.top {
  background: #aa0050;
  height: 80px;
  text-align: center;
  line-height: 80px;
  color: #fff;
  font-size: 29px;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 999;
}

aside {
  background: #535961;
}

.sidebar ul {
  position: absolute;
  transition: ease .2s;
}

.sidebar li {
  margin-bottom: 20px;
}

main {
  background: goldenrod;
}

article {
  padding: 20px;
}

footer {
  height: 400px;
  background: #006caa;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<body>
  <header>
    <div class="top">Navigation</div>
  </header>

  <div class="container-fluid content__wrapper">
    <div class="row">
      <aside class="col-sm-4">
        <div class="sidebar">
          <h2>Sidebar</h2>
          <ul class="natural">
            <li><a href="#article1">List Item1</a></li>
            <li><a href="#article2">List Item 2</a></li>
            <li><a href="#article3">List Item 3</a></li>
            <li><a href="#article4">List Item 4</a></li>
            <li><a href="#article5">List Item 5</a></li>
            <li><a href="#article6">List Item 6</a></li>
            <li><a href="#article7">List Item 7</a></li>
            <li><a href="#article8">List Item 8</a></li>
            <li><a href="#article9">List Item 9</a></li>
            <li><a href="#article10">List Item 10</a></li>
            <li><a href="#article11">List Item 11</a></li>
            <li><a href="#article12">List Item 12</a></li>
          </ul>
        </div>
      </aside>
      <main class="col-sm-8">
        <article id="article1">
          <h6>Article 1</h6>
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
          you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a
          dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
          words etc.
        </article>
        <article id="article2">
          <h6>Article 2</h6>
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
          you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a
          dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
          words etc.
        </article>
        <article id="article3">
          <h6>Article 3</h6>
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
          you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a
          dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
          words etc.
        </article>
        <article id="article4">
          <h6>Article 4</h6>
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
          you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a
          dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
          words etc.
        </article>
        <article id="article5">
          <h6>Article 5</h6>
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
          you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a
          dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
          words etc.
        </article>
        <article id="article6">
          <h6>Article 6</h6>
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
          you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a
          dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
          words etc.
        </article>
        <article id="article7">
          <h6>Article 7</h6>
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
          you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a
          dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
          words etc.
        </article>
        <article id="article8">
          <h6>Article 8</h6>
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
          you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a
          dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
          words etc.
        </article>
        <article id="article9">
          <h6>Article 9</h6>
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
          you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a
          dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
          words etc.
        </article>
        <article id="article10">
          <h6>Article 10</h6>
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
          you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a
          dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
          words etc.
        </article>
        <article id="article11">
          <h6>Article 11</h6>
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
          you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a
          dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
          words etc.
        </article>
        <article id="article12">
          <h6>Article 12</h6>
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
          you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a
          dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
          words etc.
        </article>
      </main>
    </div>
  </div>
  <footer></footer>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

问题是当我滚动到文章时有一些跳转并且文章的标题被粘滞条隐藏了。我不确定我的计算可能在某个地方与偏移顶部和粘性条有误。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

如果您将 window.location.hash 设置为元素的 ID 属性，浏览器将跳转到该元素。

解决方案一：（设置window.location.hash后，滚动回-80偏移量）

  $(".sidebar ul li a[href^='#']").on('click', function(e) {
    e.preventDefault();
    var hash = this.hash;
    $('html, body').animate({
        scrollTop: $(hash).offset().top - 80
      }, 1000,
      function() {
        window.location.hash = hash;
        window.scrollTo(0, $(hash).offset().top - 80);
      });
  });

另一种解决方案（不要设置window.location.hash）：

  $(".sidebar ul li a[href^='#']").on('click', function(e) {
    e.preventDefault();
    var hash = this.hash;
    $('html, body').animate({
        scrollTop: $(hash).offset().top - 80
      }, 1000);
  });

其他解决方案请访问：How can I update window.location.hash without jumping the document?

【讨论】：