Question

我一直在尝试滚动到带有粘性侧边栏和顶部栏的文章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>

问题是，当我滚动到文章时，会有一些跳转，并且文章标题被粘滞栏隐藏。我不确定偏移顶和粘性栏的计算是否正确。

Answer 1

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

解决方案1：（在设置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?

滚动到带有导航栏和侧边栏的部分

1 个答案: