如何制作一个跟随浏览器 window 但在其容器末尾停止的箭头？

Question

我目前正在尝试实现向下滚动箭头。 通常这是一个简单的步骤，但这次却很复杂。 因为我的客户想要一个具有固定高度的图像的主页，所以主页 header（由图像高度定义的大小）有时比浏览器 window 大，有时不是。 如果 window 更大，我想将滚动条向下粘贴到浏览器 window。 如果没有，它不应该在 header 之外溢出主页 header。

这是我的代码：

 #wrapper { resize: both; overflow: auto; max-width: 400px; border: 2px solid black; display: block; } #header { position: relative; } #scroll-down { position: absolute; bottom: 0; margin: auto; font-size: 40px; color: #ffffff; cursor: pointer; text-align: center; width: 100%; } img { width: 400px; }

 <div id="wrapper"> <div id="header"> <img src="https://images.unsplash.com/photo-1524821065909-083ad70f4743?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"> <div id="scroll-down">˅</div> </div> <div id="content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div> </div>

如果浏览器窗口/视图长于 header，则第一个可能的 position 应位于底部。 在这种情况下，箭头卡在 header window 的末端：

第二个 position 应始终位于浏览器窗口/视图的末尾，以防 header 图像太长而无法在视图中完全可见：

我怎样才能做到这一点？ 是否有仅 CSS 的解决方案，还是我也需要一些 JavaScript？ 我从来没有做过这样的事情，所以我很高兴听到你的想法。

Answer 1

position:sticky可以这样做：

 #wrapper { max-width: 400px; border: 2px solid black; } #scroll-down { position: sticky; bottom: 10px; /* you can use 0 or a small offset */ font-size: 40px; color: #ffffff; cursor: pointer; text-align: center; width: 100%; margin-top: -47px; /* this is the height of the arrow */ } img { width: 400px; }

 <div id="wrapper"> <div id="header"> <img src="https://images.unsplash.com/photo-1524821065909-083ad70f4743?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"> <div id="scroll-down">˅</div> </div> <div id="content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div> </div>

如果你不知道箭头的高度，你可以使用下面的另一个技巧：

 #wrapper { max-width: 400px; border: 2px solid black; } #scroll-down { position: sticky; bottom: 10px; font-size: 40px; color: #ffffff; cursor: pointer; height:0; display:flex; align-items:flex-end; justify-content:center; } img { width: 400px; }

 <div id="wrapper"> <div id="header"> <img src="https://images.unsplash.com/photo-1524821065909-083ad70f4743?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"> <div id="scroll-down">˅</div> </div> <div id="content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div> </div>