Estoy usando Boostrap scrollspy para mi navegación en la página.
Cada enlace tiene un desplazamiento de 70 píxeles. Pero para un solo elemento de navegación necesito un desplazamiento diferente de 140 píxeles.
¿Hay alguna forma de hacer esto?
$(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>