固定位置IE11问题

Question

我遇到IE11中固定位置的问题，这是一个众所周知的错误...... 我已经尝试了不同的css hacks来使它适用于IE11，但似乎没有解决这个特定代码的问题。

有人建议可以解决这个问题吗？

! function(a) {
  a.fn.scrollForever = function(b) {
    var c = {
        placeholder: 0,
        dir: "left",
        container: "ul",
        inner: "li",
        speed: 1e5,
        delayTime: 0,
        continuous: !0,
        num: 1
      },
      d = a.extend({}, c, b),
      e = d.placeholder,
      f = d.dir,
      g = d.speed;
    d.Time;
    var i = d.num,
      j = d.delayTime;

    return this.each(function() {
      function s() {
        q = h.outerWidth(), r = h.outerHeight(), d.continuous ? "left" == f ? (l = q * k, c.css("width", 2 * l), p && (h.clone().appendTo(c), p = !1)) : "top" == f && (l = r * k, c.css("height", 2 * l), p && (h.clone().appendTo(c), p = !1)) : "left" == f ? (e = 0 != e ? e : q * i, l = q * (k + 1), c.css("width", l)) : "top" == f && (e = 0 != e ? e : r * i, l = r * (k + 1), c.css("height", l))
      }

      function t() {
        d.continuous ? "left" == f ? (m = b.scrollLeft(), m >= l ? b.scrollLeft(0) : b.scrollLeft(m + 1)) : "top" == f && (m = b.scrollTop(), m >= l ? b.scrollTop(0) : b.scrollTop(m + 1)) : "left" == f ? c.animate({
            marginLeft: "-" + e
          }, g,

          function() {
            c.css({
              marginLeft: 0
            }).find(d.inner + ":lt(" + i + ")").appendTo(c)
          }) : "top" == f && c.animate({
            marginTop: "+" + e
          }, g,

          function() {
            c.css({
              marginTop: 0
            }).find(d.inner + ":lt(" + i + ")").appendTo(c)
          })
      }

      var l, m, n, o, q, r, b = a(this),
        c = b.find(d.container),
        h = c.find(d.inner),
        k = h.length,
        p = !0;
      a(window).on("resize", function() {
        clearTimeout(o), o = setTimeout(s, 250)
      }), s();

      var u = 1 == d.continuous ? 20 : 2e3;
      j = 0 == j ? u : j, n = setInterval(t, j), b.hover(function() {
          clearInterval(n)
        },

        function() {
          n = setInterval(t, j);
        });
    });
  };
}(jQuery); 



  // Function that generates n number of span element inside banner
  function append(q) {
    String.prototype.times = function(n) {
      return Array.prototype.join.call({
        length: n + 1
      }, this);
    };
    // ADJUST DATE HERE 
    var leipzig = "<span class='banner_text banner_text-left'>text left</span>".times(q);
    var dresden = "<span class='banner_text banner_text-right'>text right</span>".times(q);
    $('.banner_inner-left').append(leipzig);
    $('.banner_inner-right').append(dresden);
  }

// On load append n span element per banner
$(window).on('load', function(e) {
  $(".primary").attr('id', 'primary');
  $(".primary > ul").attr('class', 'primary_inner');
  var q = "5";
  append(q);
});

// Scrollforever settings for banner left
$("#banner-left").scrollForever({
  container: '.banner',
  inner: '.banner_inner'
});

// Scrollforever settings for banner right
$("#banner-right").scrollForever({
  container: '.banner',
  inner: '.banner_inner'
});

body {
  background-color: tomato;
}


/* Basic CSS */

.banner {
  position: fixed;
  padding: 0;
  overflow: hidden;
  z-index: auto;
}

.banner_inner {
  width: 100%;
  white-space: nowrap;
  margin-bottom: 0;
  margin-top: 0.3%;
  cursor: pointer;
}

.banner_text {
  margin-right: 4%;
  text-transform: uppercase;
  color: black;
  font-size: 6.76vw;
  line-height: 1.1;
}

.banner-left {
  bottom: 0;
  left: 84%;
  width: 100vh;
  height: 8vw;
  background-color: white;
  transform: rotate(-90deg) translateY(100%);
  transform-origin: left bottom;
  z-index: 102;
  cursor: pointer;
}

.banner-right {
  top: 0;
  left: 16%;
  width: 100vh;
  height: 8vw;
  background-color: white;
  color: white;
  transform: rotate(90deg);
  transform-origin: top left;
  z-index: 102;
  cursor: pointer;
}

#banner-arrow-right {
  position: fixed;
  text-transform: uppercase;
  text-align: center;
  font-family: FuturaBangBang-Bold;
  color: black;
  font-size: 6.76vw;
  line-height: 1.1;
  top: 0vw;
  right: 0px;
  width: 8vw;
  height: 8vw;
  background-color: white;
  transform: rotate(-90deg) translateY(100%);
  transform-origin: left bottom;
  z-index: 103;
  cursor: pointer;
}

#banner-arrow-left {
  position: fixed;
  text-transform: uppercase;
  text-align: center;
  font-family: FuturaBangBang-Bold;
  color: black;
  font-size: 6.76vw;
  line-height: 1.1;
  bottom: 0vw;
  left: 0px;
  width: 8vw;
  height: 8vw;
  background-color: white;
  transform: rotate(-90deg) translateY(100%);
  transform-origin: left bottom;
  z-index: 103;
  cursor: pointer;
}


/* off canvas sidebar for screen */


/*right*/

nav#offcanvas-menuright {
  /* Full screen nav menu */
  width: 50vw;
  height: 100vh;
  /* this is for browsers that don't support CSS3 translate3d */
  -moz-transform: translate3d(42vw, 0, 0);
  -webkit-transform: translate3d(42vw, 0, 0);
  transform: translate3d(42vw, 0, 0);
}

input[type="checkbox"]#toggleboxright:checked ~ div#banner-right {
  -moz-transform: translate3d(-50vw, 0, 0);
  -webkit-transform: translate3d(-50vw, 0, 0);
  transform: translate3d(-50vw, 0, 0);
}

nav#offcanvas-menuright {
  right:0vw;
}


/* left */

nav#offcanvas-menuleft {
  /* Full screen nav menu */
  width: 50vw;
  height: 100vh;
  /* this is for browsers that don't support CSS3 translate3d */
  -moz-transform: translate3d(-42vw, 0, 0);
  -webkit-transform: translate3d(-42vw, 0, 0);
  transform: translate3d(-42vw, 0, 0);
}

input[type="checkbox"]#toggleboxleft:checked ~ div#banner-left {
  -moz-transform: translate3d(0, 50vw, 0);
  -webkit-transform: translate3d(0, 50vw, 0);
  transform: translate3d(0, 50vw, 0);
}

nav#offcanvas-menuleft {
  left: 0vw;
}


/* off canvas sidebar left right */

div#main-region {
  position: relative;
  width: 100%;
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -moz-transition: -moz-transform 0.5s;
  /* transition settings */
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}


/* SIDEBAR RIGHT */

input[type="checkbox"]#toggleboxright {
  /* checkbox used to toggle menu state */
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
}

nav#offcanvas-menuright label#closex {
  /* Large x close button inside nav */
  width: 100vw;
  height: 100vh;
  text-indent: -1000px;
  /*overflow: hidden;*/
  display: block;
  position: absolute;
  cursor: pointer;
  z-index: 10;
  top: 0;
}

nav#offcanvas-menuright ul {
  list-style: none;
  margin-top: 0px;
  font-family: FuturaBangBang-Bold;
  opacity: 0;
  padding: 0;
  position: relative;
  /* use google font inside nav UL */
  -moz-transition: margin-top 0.0s 0.3s, opacity 0.1s 0.3s;
  /* transition settings */
  -webkit-transition: margin-top 0.0s 0.3s, opacity 0.1s 0.3s;
  transition: margin-top 0.0s 0.3s, opacity 0.1s 0.3s;
}

input[type="checkbox"]#toggleboxright:checked ~ nav#offcanvas-menuright {
  /* nav state when corresponding checkbox is checked */
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  visibility: visible;
  /* this is for browsers that don't support CSS3 translate3d in showing the menu */
  -moz-transition-delay: 0s;
  /* No delay for applying "visibility:visible" property when menu is going from "closed" to "open" */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

input[type="checkbox"]#toggleboxright:checked ~ nav#offcanvas-menuright ul {
  /* nav state when corresponding checkbox is checked */
  margin-top: 2.5vw;
  font-family: FuturaBangBang-Bold;
  opacity: 1;
}


/*SIDEBAR LEFT*/

input[type="checkbox"]#toggleboxleft {
  /* checkbox used to toggle menu state */
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
}

nav#offcanvas-menuleft label#closex {
  /* Large x close button inside nav */
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: block;
  position: absolute;
  cursor: pointer;
  text-indent: -10000px;
  line-height: 1.1;
  z-index: 10;
  top: 0;
  right: 0;
}

nav#offcanvas-menuleft ul {
  list-style: none;
  font-family: FuturaBangBang-Bold;
  opacity: 0;
  padding: 0;
  position: relative;
    -moz-transition: margin-top 0.0s 0.3s, opacity 0.1s 0.3s;
  /* transition settings */
  -webkit-transition: margin-top 0.0s 0.3s, opacity 0.1s 0.3s;
  transition: margin-top 0.0s 0.3s, opacity 0.1s 0.3s;
}

nav#offcanvas-menuleft ul li {
  margin-bottom: 25px;
}

nav#offcanvas-menuleft ul li a {
  padding: 10px;
  border-radius: 20px;
}

input[type="checkbox"]#toggleboxleft:checked ~ nav#offcanvas-menuleft {
  /* nav state when corresponding checkbox is checked */
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  visibility: visible;
  /* this is for browsers that don't support CSS3 translate3d in showing the menu */
  -moz-transition-delay: 0s;
  /* No delay for applying "visibility:visible" property when menu is going from "closed" to "open" */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

input[type="checkbox"]#toggleboxleft:checked ~ nav#offcanvas-menuleft ul {
  /* nav state when corresponding checkboxleft is checked */
  margin-top: 2.5vw;
  opacity: 1;
}

nav#offcanvas-menuright {
  top: 0;
  z-index: 104;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #000;
  display: block;
  position: fixed;
  color: white;
  overflow: auto;
  -moz-transition: -moz-transform 0.5s,
  visibility 0s 0.5s;
    /* transition settings */
  -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s; 
  transition: transform 0.5s, visibility 0s 0.5s;
}

nav#offcanvas-menuleft {
  top: 0;
  z-index: 104;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #000;
  display: block;
  position: fixed;
  color: white;
  overflow: auto;
  -moz-transition: -moz-transform 0.5s,
  visibility 0s 0.5s;
    /* transition settings */
  -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s; 
  transition: transform 0.5s, visibility 0s 0.5s;
}

<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script>


<input type="checkbox" id="toggleboxright" /><nav id="offcanvas-menuright">
  <label for="toggleboxright" id="closex">×</label>
  <label for="toggleboxright">
      <div id="banner-arrow-left"><a>↓</a></div>
    
  <div class="banner banner-right" id="banner-right">
  <div class="banner_inner banner_inner-right _Default">
  </div>
    </label>
  <ul>
    Here can be some pretty text RIGHT
  </ul>
</nav>

  
<input type="checkbox" id="toggleboxleft" />
<nav id="offcanvas-menuleft">
  <label for="toggleboxleft" id="closex">×</label>
  <label for="toggleboxleft"><div id="banner-arrow-right"><a>↑</a>
    </div>
      <div class="banner banner-left" id="banner-left">
  <div class="banner_inner banner_inner-left _Default">
  </div>
 <ul>
    
        <a> Here can be some pretty text LEFT</a></ul>
  </label>
</nav>