Solution 1 :

add this

  // chrome
  position: -webkit-sticky;

  // firefox
  position: -moz-sticky;

  // IE
  position: -ms-sticky;

Problem :

html {
  height: 100%;
}

body {
  height: 100%;
  background-color: var(--main-bg2-color);
}

.wrapper {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 55.6px !important;
  display: grid;
  grid-template-columns: 17% 50% 30%;
  column-gap: 15px;
}

.left-side {
  background-color: var(--main-bg2-color);
  color: var(--main-text-color);
  height: 100%;
  padding-top: 41px;
  padding-left: 0;
  position: sticky;
  top: 55px;
}

.middle-side {
  padding-top: 40px;
  background-color: var(--main-bg2-color);
  color: white;
  height: auto;
}

.right-side {
  padding-top: 40px;
  padding-left: 0;
  background-color: var(--main-bg2-color);
  height: auto;
  position: sticky;
  top: 55px;
}
<nav>
</nav>

<div class="container">
      <div class="wrapper">
        <div class="left-side">
        </div>
        <div class="middle-side">
        </div> 
        <div class="right-side">
        </div>
      </div>
    </div>
</div>

<footer>
</footer>

I want the left side class div and right side class div to be sticky and middle content should be scrollable while scrolling down so I have used position sticky to left side class and right side class. But the position sticky is not working.

Comments

Comment posted by cloned

I created a snippet from your code, please add code so we can actually see your problem.

Comment posted by Temani Afif

add

Comment posted by Temani Afif

also it won’t work with left because you made the height:100%

Comment posted by ronak patel

Thanks a lot @TemaniAfif. It worked

Comment posted by Temani Afif

your element is stretched to its parent height so there is no room to have a sticky behavior. See the duplicate to understand how sticky works and how the height of the element is important

Comment posted by cloned

No prefixes necessary for this, all browsers support this without prefixes. Except IE, it doesn’t support it at all, making this just wrong.

Comment posted by ronak patel

I had added it. But still it doesnt work

By

Leave a Reply

Your email address will not be published. Required fields are marked *