定位具有溢流支撑的粘性填充物

Question

我在我的应用中使用position: sticky，在使用overflow属性显示滚动条的容器内。我已经搜索了一个支持这种情况的polyfill，但到目前为止没有任何运气。

有谁知道支持oveflow的这种polyfill /垫片？

此致

Answer 1

我使用了名为stickyfill的position: sticky填充材料。

即使在原生支持position: sticky的浏览器上，您也只需告诉polyfill即可完成工作。

这是一个演示，也在Codepen

上

Stickyfill.forceSticky()
Stickyfill.add(document.querySelectorAll('[data-sticky]'));

body {
  padding: 50vh 2rem 100vh 2rem;
  font-size: 0.625rem;
  font-family: monospace;
  color: white;
}

.heading {
  display: flex;
}
.heading h2 {
  flex: 1;
  color: #444;
  font-weight: bold;
  padding: 1rem;
}

main {
  display: flex;
}

.parent {
  flex: 1;
  margin: 0 3px;
  padding: 1rem;
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  overflow: visible;
}
.parent-sticky .sticky {
  position: -webkit-sticky;
  position: sticky;
}
.parent-overflow {
  height: 1000px;
  overflow: hidden;
}
.parent-worst .content, .parent-worst .sticky {
  background: linear-gradient(to bottom, tomato, red);
}
.parent-best .content, .parent-best .sticky {
  background: linear-gradient(to bottom, #11ee11, #22cc22);
  color: black;
}

.sticky {
  width: 50%;
  top: 1rem;
  margin-bottom: 1rem;
  padding: 0.3rem;
  background: linear-gradient(to bottom, #999, #555);
}

.content {
  flex: 1;
  height: 2500px;
  padding: 0.3rem;
  background: linear-gradient(to bottom, #999, #555);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/2.1.0/stickyfill.min.js"></script>
<div class="heading">
	<h2>overflow: hidden;</h2>
	<h2>overflow: visible;</h2>
	<h2>overflow: visible;</h2>
	<h2>overflow: hidden;</h2>
</div>

<main>
	<div class="parent parent-sticky parent-overflow parent-worst">
		<div class="sticky">
			position: sticky native with overflow-hiding parent
		</div>
		<div class="content">
			doesn't work at all
		</div>
	</div>

	<div class="parent parent-sticky">
		<div class="sticky">
			position:sticky<br>native
		</div>
		<div class="content">
			Works fine in "newer" browsers
		</div>
	</div>

	<div class="parent parent-normal">
		<div class="sticky" data-sticky>
			stickyfill without overflow-hiding parent
		</div>
		<div class="content">
			works fine in most browsers
		</div>
	</div>

	<div class="parent parent-overflow parent-best">
		<div class="sticky" data-sticky>
			stickyfill with overflow-hiding parent
		</div>
		<div class="content">
			works fine in most browsers
		</div>
	</div>
</main>