Question: I've a sidebar which is positioned `sticky` but in some cases larger than the height of the screen.

If the sidebar is in fact larger as the screen height, I don't want it to stick on the top. It should scroll down with the content of the page.

I'm using Bootstraps `sticky-top` class for that.

It has the following attributes:

```
.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020;
}

```

I changed the `top: 0` to `top: 50px` in my case because I need the space above.

Here's some example code: <https://codepen.io/cray_code/pen/ZEaOXwo>

```
<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <div class="toc sticky-top">
                <nav class="list-group">
                        Links (see example)
                </nav>
            </div>
        </div>
            <div class="col-lg-9">
                Content (see example)
            </div>
        </div>
</div>

```

I tried the solution from [here](https://stackoverflow.com/q/69408182/1788961) and added the following code to my class:

```
.toc {
    overflow-y: auto;
    max-height: 100vh;
}

```

But that doesn't help.

Is there a pure CSS solution for that or do I need to use JavaScript?

Answer: 
Hope this [pen](https://codepen.io/neptotech/full/RwjRjOZ) helps
----------------------------------------------------------------

### Some explanations:

* in js we use `.offsetHeight`&`.clientHeight` to get height we check weather this height(`493px`) + `50px` offset is more than screen height or not.
* When screen size is small we set position to `static`
* Also we set `margin-top: 50px` instead of `top: 50px`  

because `top` works only for `sticky` and `margin-top` works for `static`
For aside blocks that higher then window height you can use smartSticky script
Just add "data-smartsticky" atribute to your aside block
<https://www.npmjs.com/package/smartsticker>
Parent block of sticky block must be height 100%, or for flex - flex-grow:1