how to make sidebar sticky on scroll

Question

im use this Bootstrap themes

preview link

But I could not get the sidebar as a sticky sidebar when scrolling.

Answer 1

You can either make a custom stylesheet specifying the sidebar style or you can add an inline CSS code "position: sticky" to your sidebar element/container.

With the former, add a custom class to your sidebar container (eg <div class="stickySidebar"><ul>...</ul></div> ) and add position:sticky in your CSS stylesheet:

.stickySidebar{ position: sticky; }

or if you want to see the result without doing those steps, add an inline CSS in your sidebar container:

<div class="sidebar" style="position: sticky;">

Answer 2

There is a slight loophole in your code. As we all know that position:sticky only support when there is no parent element has overflow:hidden . I reviewed your site and found a few errors.

1 .blog.sidebar has no property as position: sticky . Please add it. like this.

.blog .sidebar {
  padding: 30px;
  margin: 0 0 60px 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  position: sticky; // Newly Added CSS
  top: 0; // Newly added css
}

2 Remove overflow:hidden from section css like this.

section {
    padding: 60px 0;
    /* overflow: hidden; */ // Remove this.
}

Thanks me later.