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

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

By using z-index I fixed the problem

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

}