How can I make an arrow that follows the browser window but stops at the end of its container?

Question

I'm currently trying to implement a scroll down arrow. Normally this is an easy step but this time it's a but complex. Because my customer wants a homepage with an image that has a fixed hight, the homepage header (size defined by image height) is sometime bigger than the browser window and sometimes not. In the case the window is bigger, I want to stick the scroll down to the browser window. If not, it should not overflow the homepage header outside of the header.

This is my code:

 #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>

The first possible position should be at the bottom if the browser window/view is longer than the header. In this case the arrow is stuck at the end of the header window:

The second position should be always at the end of the browser window/view in case the header image is too long to be completely visible in the view:

How can I do this? Is there a CSS only solution or do I need some JavaScript too? I've never did anything like this so I'm happy to hear your ideas.

Answer 1

position:sticky can do this:

 #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>

If you don't know the height of the arrow you can use another trick like below:

 #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>