Position: Sticky Buttons Not Working in Ie 11

position:sticky doesn't work together with display:flex on IE 11

According to caniuse.com position: sticky is not supported in IE11 and display: flex have partial support because lots of bugs.

I don't have much experience with StickyState but I use StickyBits and it works just fine.

EDIT:

Working example

<div class="flexbox-wrapper">
  <div class="regular">
    This is the regular box
  </div>
  <div class="sticky" id="stickyEl">
    This is the sticky box
  </div>
</div>

stickybits('#stickyEl');

body {
  height: 1500px;
}
.flexbox-wrapper {
  display: flex;
  display: -ms-flexbox;
}
.regular {
  background-color: blue;
  height: 600px;
  -ms-flex: 1 0 auto;

}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: flex-start;
  background-color: red;
}

make a div sticky in IE and in top of footer

Writing some few lines of JavaScript should do the trick for this requirement. We can have the main footer as our indicator if we should have the sub footer position: fixed or position: relative based on the current window scroll position - this is what sticky is after all, i.e., a hybrid of fixed & relative.

In my solution below, the general advantage is that the event listener for scroll only kicks in when the client is using IE11. I've found that IE11 actually removes the sticky position style on the DOM since it does not support it.

In short, moderns browsers are still going to use sticky and the below code is simply backup when the user is on IE11.

<!-- place the style inline to cater the condition statement -->
<div class="slider" style="position: sticky;">

.slider {
  background: #006264;
  color: white;
  position: fixed; /* fixed is for the IE11 fallback */
  bottom: 0px;
  width: 100%;
  height: 60px;
}

// IE11 actually removes "sticky" from attribute "styles" value. So at this point we can control when to add an event listener (i.e., Modern browsers will still use position: sticky)
if (divFooter.style.position != "sticky") {
  window.addEventListener("scroll", function() {
    if (mainFooter.getBoundingClientRect().top - window.innerHeight <= 0) {
      divFooter.style.position = "relative";
      mainFooter.style.marginTop = "0";
    } else if (mainFooter.getBoundingClientRect().top - window.innerHeight > 0) {
      divFooter.style.position = "fixed";
      mainFooter.style.marginTop = divFooter.clientHeight.toString() + "px";
    }
  })
}

var divFooter = document.querySelector(".slider");
var mainFooter = document.querySelector(".footer");

// IE11 actually removes "sticky" from attribute "styles" value. So at this point we can control when to add an event listener (i.e., Modern browsers will still use position: sticky)
if (divFooter.style.position != "sticky") {
  window.addEventListener("scroll", function() {
    if (mainFooter.getBoundingClientRect().top - window.innerHeight <= 0) {
      divFooter.style.position = "relative";
      mainFooter.style.marginTop = "0";
    } else if (mainFooter.getBoundingClientRect().top - window.innerHeight > 0) {
      divFooter.style.position = "fixed";
      mainFooter.style.marginTop = divFooter.clientHeight.toString() + "px";
    }
  })
}

html,
body {
  margin: 0;
}

.placeholder {
  border: 1px solid black;
  margin: 0 auto;
  text-align: center;
  height: 300px;
}

.slider {
  background: #006264;
  color: white;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 60px;
}

.footer {
  background: #04246A;
  color: white;
  font-weight: bold;
  margin: 0 auto;
  height: 119px;
}

<div class="main">
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="slider" style="position: sticky;">
    This is the footer
  </div>
</div>
<div class="footer">This is the main footer</div>

.navbar {  background: hotpink;  width: 100%;  height: 50px;  position: -webkit-sticky;  position: sticky;  top: 0;}
.header {  height: 150px;  background: grey;}
body {  height: 800px;  position: relative;}

<div class="header"><div class="desc">Description</div><div class="logo"><img src=""/></div></div>
<div class="navbar"></div>