单击后无法将选项卡固定在导航栏部分下方的顶部

Question

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

Answer 1

You cannot nest CSS like that. Instead, use to select siblings at any level. And also, you have to put position:sticky on the direct sibling of an element that is being scrolled.

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

 <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> <div style="height:3600px;width:100%;background-color:blue;color:white;">foo</div>

Answer 2

By using z-index I fixed the problem

.tabs-position {
 margin-bottom: 50px;
 position:sticky;
 top: 0;
 background-color: red;
 z-index: 1;

}