1

I'm using the Boostrap scrollspy for my onpage navigation.

Every link has an offset of 70 pixels. But for one single nav item I need a different offset of 140 pixels.

Is there a way to do this?

$(function() {
  $('body').scrollspy({
    target: '#scrollnav',
    offset: 70,
  });
});
#scrollnav {position: sticky; top:0;}
.nav-link.active {background: blue; color:#fff;}
.content {height: 1500px; padding: 140px 16px;}
.content-1 {padding: 70px 16px;}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<nav id="scrollnav">
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link page-scroll" href="#link_1">First Link with only 20px offset</a>
    </li>
    <li class="nav-item">
      <a class="nav-link page-scroll" href="#link_2">Second Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link page-scroll" href="#link_3">Third Link</a>
    </li>
  </ul>
</nav>

<div id="link_1" class="content content-1">First Link with only 20px offset</div>
<div id="link_2" class="content">Second Link</div>
<div id="link_3" class="content">Third Link</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
Cray
  • 5,307
  • 11
  • 70
  • 166
  • I've converted your code to a snippet demo. Please revise to show the problem better. – isherwood Feb 07 '22 at 19:18
  • I've added some content divs for better understanding. As you can see, the first div has a smaller `padding-top`. To let all divs start at the same position, I need another offset for the first link/div. – Cray Feb 08 '22 at 06:28
  • 1
    @isherwood the `.active` class wasn't styled. Now it is ;-) – Cray Feb 08 '22 at 14:18

0 Answers0