Edit: I added the windo scroll function I make it but the contents under tabs goes over from it. How can I fix that?

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

}

I have a page with a navbar and tabs. When I click them I direct the user to the section in the same page using the id attribute, however my tabs are in the middle of my page which is fine. What I am trying to achieve is to move them under my navbar section when I click them.

I tried after attribute but I don't get it. I have included my code below, How can I replace their position?

<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;
        }
    }
}