Div with Scrollbar Inside Div with Position:Fixed

Place an item at a fixed position in a scrolling div

A standardly supported way is to edit the HTML markup and add a wrapper element to both the scrollable and the "fixed" element - which will now have position: absolute; instead:

#wrapper {  /* ADDED */

  position: relative;

  width: 200px;

}

#scrollable {

  height: 100px;

  border: 1px solid;

  overflow: auto;

  position: relative;

}

#wrapperFooter {

  background: red;

  position: absolute; /**/

  bottom:0;

}

<div id="wrapper">

  <div id="scrollable">

    <p style="border: 4px dashed #000; height: 200px;"></p>

  </div>

  <div id="wrapperFooter">ABSOLUTELY! :)</div>

</div>

How do I scroll in a div - within a fixed div

I have a problem with the following:

if (isHidden){
    $( "body" ).removeClass( "makeFixed" );
} else {
    $( "body" ).addClass( "makeFixed" );
}

having the following CSS:

.makeFixed{
    position: fixed;
}

Which means you are fixing the body to... the body? Here is my suggestion:

// I'll keep your HTML intact
<div class="list">
  <h2 id="cat-header"> ALL CATEGORIES</h2>
    <ul class="sports">
      <li class="mainli"></li>
      <li class="mainli"></li>
      <li class="mainli"></li>
    </ul>
</div>

// Your list will be your fixed element. It might be better to call this your nav.
.list {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    transition: height 500ms;
    overflow-x: hidden;
}
// I add an active state for it. It will also nicely animate thanks to the previously named transition.
.list.active {
    height: 99%;
}

// I only toggle the .active class on the click of the mobile button
$('#mob-menu-btn').click(function(){ $(".list").toggleClass("active"); });

This way you simplify your menu quite a bit. You animate with CSS, you have a simple wrapper that determines where your menu will be positioned and how, and the contents will push the overflow to be scrollable if they are larger.

Also, 'overflow: auto' is unnecessary, I have not come across a need for this. Heres an example where the yellow area is fixed to be very heigh so the scrolling will work, but the gist is the same (actually, I've adjusted all values to make the example more visually obvious):

window.onload = function(){

document.getElementById("button").addEventListener("click", function(){

 if(document.getElementById("list").className == "active"){

  document.getElementById("list").className = "";

 } else {

  document.getElementById("list").className = "active";

 }

});

}

#list {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 0;

    transition: height 500ms;

    overflow-x: hidden;

    background: blue;

}

#list.active {

    height: 80%;

}

#list ul {

 height: 3000px;

 background: yellow;

}

#button {

 z-index: 4;

 position: absolute;

 top: 10px;

 left: 10px;

  background: #fff;

}

<div id="button">click me</div>

<div id="list">

  <h2 id="cat-header"> ALL CATEGORIES</h2>

    <ul class="sports">

      <li class="mainli"></li>

      <li class="mainli"></li>

      <li class="mainli"></li>

    </ul>

</div>

Overflow div inside fixed div

You need to calculate the height of #scrollable div with calc() because in this menu also take some space of it so that #scrollable not getting 100% height of the div.

height: calc(100% - 30px);

* {

  margin: 0;

  padding: 0;

}

#fixed {

  width: 300px;

  height: 100%;

  max-height: 345px;

  position: fixed;

  background: #333;

  border: 2px solid #333;

}

#menu {

  background: pink;

  line-height: 25px;

  padding-left: 20px;

}

#scrollable {

  position: absolute;

  height: calc(100% - 30px);

  width: 100%;

  overflow-y: auto;

}

ul {

  list-style: none;

}

ul li a {

  color: white;

  line-height: 40px;

  padding-left: 20px;

  display: block;

}

ul li a:hover {

  background: blue;

}

<div id="fixed">

  <div id="menu">

    Hello

  </div>

  <div id="scrollable">

    <ul>

      <li><a>Option 1</a></li>

      <li><a>Option 2</a></li>

      <li><a>Option 3</a></li>

      <li><a>Option 4</a></li>

      <li><a>Option 5</a></li>

      <li><a>Option 6</a></li>

      <li><a>Option 7</a></li>

      <li><a>Option 8</a></li>

    </ul>

  </div>

</div>

---

Related Topics