如何制作一個跟隨瀏覽器 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>