带有粘性支撑的位置粘性保鲜盒 [英] position sticky polyfill with overflow support

问题描述

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

I am using position: sticky in my app, inside a container who use an overflow property to show a scrollbar. I have searched for a polyfill who does support this condition, but without any luck so far.

有人知道支持oveflow的这种polyfill/shim吗?

Does anyone know such a polyfill/shim who support oveflow ?

致谢

推荐答案

我使用了名为 stickyfill的position: sticky polyfill 为此.

I used a position: sticky polyfill called stickyfill to do this.

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

You just have to tell the polyfill to do it's job even on browsers that support position: sticky natively.

这是一个演示，也在 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>

这篇关于带有粘性支撑的位置粘性保鲜盒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！