Scroll Inside of a Fixed Sidebar

Scroll inside of a fixed sidebar

Set the top and bottom to 0, so that the sidebar is exactly the same height as the viewport:

#leftCol {
    position: fixed;
    width: 150px;
    overflow-y: scroll;
    top: 0;
    bottom: 0;
}

Here's your fiddle: http://jsfiddle.net/tvysB/2/

Fixed sidebar, scrollable content

You have to place your navigation div in outermost part i.e. in body(not in any other div).

I have tested this and its now working fine.

Your new code should be

<html>
<head>
    <link rel="stylesheet" href="style.css" type=" text/css" />
</head>

<body>
    <div id="navigation">
        <ul>
            <li><a href="#home">home</a></li>
            <li><a href="#news">news</a></li>
            <li><a href="#contact">contact</a></li>
            <li><a href="#about">about</a></li>
        </ul>
    </div>

    <div id="page">

        <div id="header">

        </div>
        <div id="content">
            <div id="abcd">

            </div>

        </div>

    </div>
</body>
</html>

And your modified css:-

#page {
    position: relative;
    width: 100%;
    height: 3000px;
    background-color: yellow;
}

#header {
    background-color: blue;
    width: 100%;
    height: 150px;
    display: block;
}

#navigation
{
    background-color: red;
    width:10%;
    height:100%;
    float:left;
    position: absolute;
    z-index:1;
}

#content {
    float: left;
    background-color: green;
    width: 90%;
    overflow: auto;
    height: 1000px;
}

body {
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 10%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

In css I have changed the navigation's height to 100% and its z-index to 1.

Also you didn't close the div tag with class "page".

Reference:- w3 css sidenav

Nested sticky sidebar with scrollable content

I'm not sure if you meant that the sidebar1 and 2 should always be sticky but I made almost the exact same screen you provided, I added overflow-y-scroll to the content div to it won't overflow

check it here : https://play.tailwindcss.com/SzzWQnn5Fi

Layout with sticky sidebar on the left and scrollable content on the right

You could do it like in my snippet below. Both columns have height: 100%;, the right one has overflow-y: auto to show a scrollbar only if necessary and scroll the contents inside that column:

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
}
.row {
  display: flex;
  height: 100%;
  background-color: #33a8ff;
}

.column {
  flex: 50%;
  padding: 16px;
}

.one {
  background-color: tomato;
  height: 100%;
}

.two {
  height: 100%;
  overflow-y: auto;
}

<div class="row">
  <div class="column one">
    <h2> column #1 </h2>
    <p>menu items</p>
  </div>
  <div class="column two">
    <h2>column #2</h2>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
  </div>
</div>

Sphinx alabaster theme scroll inside of fixed sidebar

It turns out the solution is hidden on this github PR. Create a file named custom.css that is in the _static folder. Then, in conf.py, add this code:

html_static_path = ['_static']

What that does is tell sphinx to override the default CSS, allowing you to enter your own CSS. Then, in the custom.css file, add this code:

div.sphinxsidebar {
    max-height: 100%;
    overflow-y: auto;
}

That code makes the scroll bar appear and is what worked for me. This is what the end result looks like:
Documentation with scroll bar

Scroll - On click not able to scroll the custom scroll inside fixed sidebar

Finally,

I made it with after lot of searching. Its just a piece of code already in m.custom scrollbar

Here is the solution:

$('.card > .collapse').on('shown.bs.collapse', function(e){

   e.preventDefault();
   e.stopPropagation();

   var childPos = $(this).parent().offset();
   var parentPos = $('#sidebar').offset();
   var childOffset = {
       top: childPos.top - parentPos.top,
       left: childPos.left - parentPos.left
   }

   $("#sidebar-wrapper").mCustomScrollbar('scrollTo', '-='+childOffset.top);
});

Scroll Inside of a Fixed Sidebar