Editar: agregué la función de desplazamiento de Windo, la hago, pero el contenido debajo de las pestañas pasa de ella. ¿Cómo puedo arreglar eso?

 $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 500) { console.log(true); $(".tabs").addClass("tabs-position"); } else { console.log(false); $(".tabs").removeClass("tabs-position"); } }); .tabs-position { margin-bottom: 50px; position:sticky; top: 0; background-color: red; }

Tengo una página con una barra de navegación y pestañas. Cuando hago clic en ellos, dirijo al usuario a la sección en la misma página usando el atributo id , sin embargo, mis pestañas están en el medio de mi página, lo cual está bien. Lo que estoy tratando de lograr es moverlos debajo de la sección de mi barra de navegación cuando hago clic en ellos.

Intenté después del attribute pero no lo entiendo. He incluido mi código a continuación. ¿Cómo puedo reemplazar su posición?

 <section class="tabs"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="tab-outer"> <div class="tab-list"> <ul> <li> <a href="#room" class="tab-link">Rooms</a> </li> <li> <a href="#info">info tab</a> </li> </ul> </div> </div> </div> </div> </div> </section>

 .tabs { margin-bottom: 50px; .tab-outer { border-bottom: 4px solid #f5f5f5; position: sticky; top: 70px; padding: 20px 0 0 0; } .tab-list { a { color: #4a4947; } ul { padding: 0 30px; display: flex; justify-content: space-between; list-style-type: none; } } }