CODEWITHSUNDEEP
javascriptjqueryhtmlcss
xAos
xAos

Reputation: 119

Scroll to section with sticky nav and sidebar

I've been trying to get a scroll to article id with sticky sidebar and top bar. I tried the following:

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

The problem is when I scroll to the article there is some jump and the title of article is hidden by the sticky bar. I am not sure maybe somewhere my calculations are wrong with offset top and the sticky bar.

Upvotes: 0

Views: 157

Answers (1)

Tibike
Tibike

Reputation: 358

If you set window.location.hash to an element's ID attribute the browser will jump to that element.

Solution 1: (after setting window.location.hash, scroll back to the -80 offset)

  $(".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);
      });
  });

Another solution (don't set 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);
  });

For other solutions visit: How can I update window.location.hash without jumping the document?

Upvotes: 1

Related Questions