在Firefox

Question

我已经努力实现了一个粘性侧边栏，当我差不多完成时，我注意到firefox控制台中有一条新消息：

此网站似乎使用滚动链接定位效果。这可能不适用于异步平移;有关详细信息，请参阅https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects，并加入有关相关工具和功能的讨论！

所以，任何人都有一个线索如何在不使用新位置的情况下解决问题：与大多数浏览器兼容的粘性？我做了一个演示 - 请全屏运行以查看侧边栏粘贴。

在我决定在这里寻求帮助之前，我尝试了至少5-6种不同的粘性插件，并且在firefox中都有相同的消息。

jQuery(document).ready(function($) {

  var parentElement = $('.sidebar');
  var stickyElement = $('.sticky-sidebar');
  var container = $('.body');
  var header = $('.header');
  var containerHeight = container.height() + 'px';
  var mediaBreakPoint = '(max-width: 980px)';
  var height = stickyElement.height();
  var heightString = height + 'px';
  var widthString = stickyElement.width() + 'px';
  var headerHeight = header.height() + 'px';

  function scrollStickySidebar($) {
    $(window).scroll(function() {
      var scroll = $(this).scrollTop();

      setParentOrContainerHeight();
      setStickyElementScrollDefaultStyles();

      var length = parentElement.height() - stickyElement.height() + parentElement.offset().top;

      if (!window.matchMedia(mediaBreakPoint).matches) {
        if (scroll < parentElement.offset().top) {
          stickyElement.css({
            'position': 'absolute',
            'top': '0',
            'bottom': 'auto'
          });
        } else if (scroll > length) {
          stickyElement.css({
            'position': 'absolute',
            'top': 'auto',
            'bottom': '0'
          });
        } else {
          stickyElement.css({
            'position': 'fixed',
            'top': '0',
            'bottom': 'auto'
          });
        }
      } else {
        setStickyElementMobileDefaultStyles();
      }
    })
  };

  function setStickyElementScrollDefaultStyles() {
    stickyElement.css({
      'height': heightString,
      'width': widthString,
      'max-width': widthString
    });
  }

  function setStickyElementMobileDefaultStyles() {
    setParentToAutoHeight();

    stickyElement.css({
      'position': 'relative',
      'top': 'auto',
      'bottom': 'auto',
      'height': 'auto',
      'width': '100%',
      'max-width': '16.688em'
    });
  }

  function setParentOrContainerHeight() {
    if (height < container.height()) {
      parentElement.css({
        'height': containerHeight
      });
    } else {
      parentElement.css({
        'height': heightString
      });
      container.css({
        'height': heightString
      });
    }
  }

  function setParentToAutoHeight() {
    parentElement.css({
      'height': 'auto'
    });
  }

  scrollStickySidebar($);

  $(window).resize(scrollStickySidebar);

});

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  font-size: 1em;
}
h1 {
  font-size: 3em;
}
section {
  max-width: 71.25em;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: 0.5em;
}
section::after {
  clear: both;
  content: "";
  display: table;
}
section div {
  text-align: center;
  margin-bottom: 0.5em;
  border-radius: 2em;
}
section.fixed-header {
  display: none;
}
section.header div {
  float: left;
  display: block;
  margin-right: 1.9356%;
  width: 100%;
  height: 10em;
  background: url("https:\a//raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png"), -webkit-linear-gradient(10deg, #0A120D, #162C4C), no-repeat #162C4C scroll;
  background: url("https:\a//raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png"), linear-gradient(10deg, #0A120D, #162C4C), no-repeat #162C4C scroll;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
}
section.header div:last-child {
  margin-right: 0;
}
@media screen and (max-width: 980px) {
  section.header div {
    float: left;
    display: block;
    margin-right: 2.33174%;
    width: 100%;
  }
  section.header div:last-child {
    margin-right: 0;
  }
}
section.body div.main {
  float: left;
  display: block;
  margin-right: 1.9356%;
  width: 74.5161%;
  height: 160em;
  background: url("https:\a//raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png"), -webkit-linear-gradient(10deg, #5DAC5D, #B5EBEB), no-repeat #B5EBEB scroll;
  background: url("https:\a//raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png"), linear-gradient(10deg, #5DAC5D, #B5EBEB), no-repeat #B5EBEB scroll;
  background-repeat: no-repeat;
  background-size: cover;
  color: gray;
}
section.body div.main:last-child {
  margin-right: 0;
}
@media screen and (max-width: 980px) {
  section.body div.main {
    float: left;
    display: block;
    margin-right: 2.33174%;
    width: 100%;
  }
  section.body div.main:last-child {
    margin-right: 0;
  }
}
section.body div.sidebar {
  float: left;
  display: block;
  margin-right: 1.9356%;
  width: 23.5483%;
  height: 160em;
  background: url("https:\a//raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png"), -webkit-linear-gradient(10deg, #477DCA, #C0C0C0), no-repeat #C0C0C0 scroll;
  background: url("https:\a//raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png"), linear-gradient(10deg, #477DCA, #C0C0C0), no-repeat #C0C0C0 scroll;
  background-repeat: no-repeat;
  background-size: cover;
  color: gray;
  position: relative;
}
section.body div.sidebar:last-child {
  margin-right: 0;
}
@media screen and (max-width: 980px) {
  section.body div.sidebar {
    float: left;
    display: block;
    margin-right: 2.33174%;
    width: 100%;
    height: auto;
  }
  section.body div.sidebar:last-child {
    margin-right: 0;
  }
}
section.body div div.sticky-sidebar {
  height: 15em;
  width: 100%;
  padding: 0;
  position: absolute;
  top: 0;
  bottom: auto;
  float: none;
  Background-color: #477DCA;
  color: white;
}
@media screen and (max-width: 980px) {
  section.body div div.sticky-sidebar {
    position: relative;
    top: auto;
    bottom: auto;
    margin: 0 auto;
    height: auto;
    width: 100%;
    max-width: 16.688em;
  }
}
section.footer div {
  float: left;
  display: block;
  margin-right: 1.9356%;
  width: 100%;
  height: 20em;
  background: url("https:\a//raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png"), -webkit-linear-gradient(10deg, #0A120D, #162C4C), no-repeat #162C4C scroll;
  background: url("https:\a//raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png"), linear-gradient(10deg, #0A120D, #162C4C), no-repeat #162C4C scroll;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
}
section.footer div:last-child {
  margin-right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<header>
  <section class="fixed-header"></section>
  <section class="header">
    <div>
      <h1>Header</h1>
    </div>
  </section>
</header>

<body>
  <section class="body">
    <div>
      <div class="main">
        <h1>Main Section</h1>
      </div>
      <div class="sidebar">
        <div class="sticky-sidebar">
          <h1>Sticky Sidebar Section</h1>
        </div>
      </div>
    </div>
  </section>
</body>
<footer>
  <section class="footer">
    <div>
      <h1>Footer</h1>
    </div>
  </section>
</footer>