Home > Mobile >  Boostrap 4 sticky sidebar not working and scrolls with page
Boostrap 4 sticky sidebar not working and scrolls with page

Time:01-02

I wanted to make the right sidebar called "Recent Posts in Category", on this page as sticky, so that when user scrolls down, it remains fixed.

Since affix is dropped in Bootstrap 4, I tried the CSS way and found an example on codepen which works fine in my browser. I added the following code to my css file:

.make-me-sticky {
  position: -webkit-sticky;
    position: sticky;
    top: 0;
}

and the class is added to the html div

<div >

but I see no effect. What's wrong?

CodePudding user response:

    .make-me-sticky {
          position: fixed;
          top: 0;
          right: 0;
          overflow: hidden;
          height: 100vh;
      }

CodePudding user response:

You can add use Bootstrap Element "position-fixed" to the Sidebar element (html). But you must reset the postion to right site also.

<div >
  • Related