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.

So you want the arrow to sit at the bottom of the window or bottom of the header whichever is shorter? Am I understanding that correctly? A picture of the different scenarios might help me make sense of it. — Bryce Howitson, May 19 '20 at 22:07
If the window is bigger than the image itself, the arrow should stick at the bottom of the header. If not, the arrow should be always visible and aligned to the window button. Do you understand? I'll also add images. Give me some minutes! — Mr. Jo, May 19 '20 at 22:10
Yes, I think that makes sense. Is the height of the image fixed or dynamic? — Bryce Howitson, May 19 '20 at 22:12
Thanks let me think about it bit. Will you know the height of the image? — Bryce Howitson, May 19 '20 at 22:20
@BryceHowitson I can get the hight via JS but it would be better if there is a non-height-relevant solution. — Mr. Jo, May 19 '20 at 22:26

Temani Afif · Accepted Answer · 2020-05-19T22:42:51.017

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>

It works now. I had to replace `overflow: auto` by `overflow: visible` at some of my parent containers. Read this to understand: https://stackoverflow.com/a/54806576/8620333. Thanks Temani for your help! — Mr. Jo, May 19 '20 at 23:30

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

1 Answers1