Por fin luego de mucho trabajar pudimos hallar el resultado de este inconveniente que agunos usuarios de nuestro sitio han tenido. Si tienes algún detalle que aportar no dudes en dejar tu conocimiento.
Solución:
Hay algunas formas diferentes de resolverlo, pero creo que la mejor es poner un pseudo elemento oculto ::before Cada sección. Esto es un Solución solo CSSsin JS o jQuery…
section:before
height: 54px;
content: "";
display:block;
https://www.codeply.com/go/J7ryJWF5fr
Eso pondrá el espacio necesario para dar cuenta de la barra de navegación superior fija. También querrá eliminar el margin-top compensar por #section1 ya que este método funcionará consistentemente para todos secciones y permitir que el scrollspy funcione.
Relacionada
¿Cómo agrego un desplazamiento de datos a una barra de navegación receptiva superior fija de Bootstrap 4?
Href Jump con Bootstrap Sticky Navbar
puedes usar jQuery para anular el comportamiento predeterminado para que no tenga que cambiar el diseño (margen, relleno, etc.)
var divId;
$('.nav-link').click(function()
divId = $(this).attr('href');
$('html, body').animate(
scrollTop: $(divId).offset().top - 54
, 100);
);
Esta solución agrega un relleno y elimina el espacio por un margen negativo en la parte superior. Esto funcionó mejor para mí.
section
padding-top: 56px;
margin-top: -56px;
.offset
height: 54px;
/* START SNIPPET */
section
padding-top: 56px;
margin-top: -56px;
/* END SNIPPET */
#section1 p, #section3 p
background-color: #ddd;
#section2 p, #section4 p
background-color: #ccc;
p
min-height: 15rem;
Section 1
Section 2
Section 3
Section 4
Si haces scroll puedes encontrar las aclaraciones de otros desarrolladores, tú aún tienes el poder insertar el tuyo si te gusta.