我想让WooCommerce的产品形象 gallery 部分，以粘性，直到底部，因为它发生在Shopify. 类似于这个，https://ninjatransfers.com/products/premium-dtf-gang-sheets
为此，我try 了位置:绝对和位置粘性都以及，像它在许多教程指导，但它不会工作.
然后，我创建自己的示例html，如下面的小提琴所示
div.sticky {
position:relative;
width: 100%;
}
p.sticky {
position: -webkit-sticky;
position: sticky;
top: 50px;
background-color: yellow;
padding: 50px;
font-size: 20px;
}<h2>Sticky Element: Scroll Down to See the Effect</h2>
<p>Scroll down this page to see how sticky positioning works.</p>
<div class="sticky">
<div style="float:left;width:45%">
<p class="sticky">I will stick to the screen when you reach my scroll position
</p>
</div>
<div style="float:right;width:45%;">
<p>Some example text..</p>
<h2>Scroll back up again to "remove" the sticky position.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac.ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim </p>
</div>
</div>
<div style="float:left;width:100%">
<p>BALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFASBALLAY ABLALAFSAFSFFSAFAS.</p>
</div>使用相同的 struct ，看看它如何与位置粘性一起工作.
我注意到，直到有第二列，它才能正常工作.但是，当生成2列并将它们逐行放入某个div中时，它停止工作.
请看Fiddle，并指引我，我错过了什么？？