Fixed nav inside scrollable div

Question

I want to have a navbar that is fixed inside a scrollable div, and not on top of the entire window. In the following example I want my navbar to appear in the red area and stay fixed when I scroll.

#containerDiv {
  padding-top: 60px;
}

#scrollDiv {
  overflow-y: scroll;
  height: 100px;
}

#scrollableContentDiv {
  background-color: red;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

<div class="container" id="containerDiv">
  <p>Outside scrollable</p>
  <p>Outside scrollable</p>
  <p>Outside scrollable</p>
  <div id="scrollDiv" tabindex="0">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
      </div>
    </nav>
    <div id="scrollableContentDiv">
      <p>Inside scrollable</p>
      <p>Inside scrollable</p>
      <p>Inside scrollable</p>
      <p>Inside scrollable</p>
      <p>Inside scrollable</p>
      <p>Inside scrollable</p>
    </div>
  </div>
  <p>Outside scrollable</p>
  <p>Outside scrollable</p>
  <p>Outside scrollable</p>
</div>

Is it possible?

Thank you for your help.

Answer 1

Fixed inside red box. Use .sticky-top (position:sticky;)

Problem is that "sticky" is an experimental API that should not be used in production code yet. But it works fine in Chrome where I tested it. Also Element with "sticky" should not be the only one child. It must have brothers (or sisters).

Note that sticky, by specification, will not work inside element with overflow: hidden or auto.

#containerDiv {
  padding-top: 60px;
}

#scrollDiv {
  overflow-y: scroll;
  height: 100px;
}

#scrollableContentDiv {
  background-color: red;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

<div class="container" id="containerDiv">
  <p>Outside scrollable</p>
  <p>Outside scrollable</p>
  <p>Outside scrollable</p>
  <div id="scrollDiv" tabindex="0">
    
    <div id="scrollableContentDiv">
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
       <div class="container-fluid">
         <a class="navbar-brand" href="#">Navbar</a>
       </div>
      </nav>
      <p>Inside scrollable</p>
      <p>Inside scrollable</p>
      <p>Inside scrollable</p>
      <p>Inside scrollable</p>
      <p>Inside scrollable</p>
      <p>Inside scrollable</p>
    </div>
  </div>
  <p>Outside scrollable</p>
  <p>Outside scrollable</p>
  <p>Outside scrollable</p>
</div>