Main content overflowing on sidebar when scrolled, using stickybits for sticking the sidebar

Question

I am using stickybits(https://github.com/dollarshaveclub/stickybits) to stick my sidebar_content div(an inline-block) when scrolled. On scroll, my main_content div(also an inline-block) goes behind the sidebar_content and this is the case only in IE. It works perfectly fine on Chrome, Firefox, Microsoft Edge and Safari. According to the documentation,

Because Stickybits is minimal, when position: sticky is not supported Stickybits will use position: fixed which is relative to the browser window. If the StickyBits parent element has a height recognized by the browser, Stickybits will take care of the sticky top and sticky bottom invocation. If the parent's height is not recognized by the browser there will be issues.

I know that IE doesn't support position: sticky. I have tried overflow: hidden; on the body and various other things but it just doesn't seem to work. This is what I have so far:

/* Main container that contains both main_content and sidebar_content */
.container {
    margin: 0 auto;
    max-width: 1150px;
    display: block;
}
.main_content {
    display: inline-block;
    max-width: 60%;
    padding-top: 0;
}
.sidebar_content {
    display: inline-block;
    vertical-align: top;
    padding-top: 5%;
    max-width: 30%;
    font-size: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/stickybits/3.7.2/stickybits.js"></script>
<div class="container">
  <div class="sidebar_content">
    This is my sidebar
  </div>
  <div class="main_content">
    This is my main content
  </div>
</div>

I am not sure what I am doing wrong here.

Answer 1

Could you use position: fixed targeting only IE?

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ie10up {
        .sidebar_content {position: fixed;}

        .main_content {position: absolute; left: 30%; }
    }
}

Answer 2

Because IE doesn't support it position: sticky, So IE USES it position:fixed, So there is no element support to the left of main_content. stickybits Provided in IE .js-is-sticky ,You can use this className to fix the location error

chrome

IE

 .sidebar_content.js-is-sticky + .main_content{
        margin-left: 216px;
    }

stickybits('.sidebar_content')

.container {
    margin: 0 auto;
    max-width: 1150px;
    display: block;
}
.main_content {
    display: inline-block;
    max-width: 60%;
    padding-top: 0;
}
.sidebar_content {
    display: inline-block;
    vertical-align: top;
    padding-top: 5%;
    max-width: 30%;
    font-size: 15px;
}
.sidebar_content.js-is-sticky + .main_content{
    margin-left: 216px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/stickybits/3.7.2/stickybits.js"></script>

<div class="container">
  <div class="sidebar_content">
    <pre>
      This is my sidebar
      This is my sidebar
      This is my sidebar
      This is my sidebar
      This is my sidebar
      This is my sidebar
    </pre>
  </div>
  <div class="main_content">
    <pre>
      
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    This is my main content
    </pre>
  </div>
</div>

Answer 3

Hard to say without a CodePen, but there could be a few things going on here:

• There are issues with changing heights in IE11. Try explicitly setting the css height on your container div.
• Instead of using vertical-align: top; in your css, try setting the vertical layout position in your JS implementation of stickybits.