Question

以下是我要找的内容，

<div id="fullpage">
<div class="section" id="section1"><h1>Content 1</h1></div>
<div class="section" id="section2"><h1>Content 2</h1><img src="imgs/man.png"/></div>
<div class="section" id="section3"><h1>Content 3</h1></div>
<div class="section" id="section4"><h1>Content 4</h1></div>
<div class="section" id="section5"><h1>Content 5</h1></div>
<div class="section" id="section6"><h1>Content 6</h1></div>

第二部分中有一个图像，通常会在用户滚动到第二部分时出现，当用户滚动到下一部分时它会消失，而不是我希望该图像也应该留在第三部分，就像从第2部分到第6部分，图像应该保留。第2至第6内容应该滚动，基本上该图像应该像固定位置的第二部分的背景图像一样。 fullpage.js（Apple）中有一个例子。

任何人都可以帮忙解决这个问题吗？

enter image description here

Answer 1

您要求的是StcikImage。在css中使用position:属性作为该图像的图像标记或包装。

img.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

StcikImage

全页JS onLeave固定图像

1 个答案: