Keep one element fixed and allow others to scroll as mobile browser address bar collapses on scroll up

Question

I'm trying to solve a problem in which I need a background image to stay in place when the address bar and the content below scroll upwards.

The image takes up 90% of the view height,I've used JS to stop this resizing and jumping when the address bar hides, but the image will still move upwards with the body of my site when the address bar hides.

I'm aiming to have the image fixed in place no matter what, so that as you begin scrolling, the content near the bottom of the screen and the address bar scroll up simulatneously, and the image remains in the same spot. It's simple enough until the viewport starts changing!

Preventing the address bar from hiding isn't an option.

Here's a representation of what I'm trying to achieve, featuring my dog

Dog stays still when content scrolls and address bar hides = good girl

HTML

<body> 
  <img class="dog" src="..."/>
  <div class="content">
    <p>Some stuff</p>
  </div>
</body>


CSS

.dog {
  position: fixed;
  left: 50%;
}

.content {
position: relative;
}

I'm thinking maybe I could position the image relative to the bottom of the view port and have it overflowing under the address bar but im not really sure how to achieve this. I'm going to continue attempting this now but it will take me a long time to figure out so if anyone can give me some pointers or if there's another approach to this I'd really appreciate hearing it!

Thank you

Does this answer your question? [Difference between position:sticky and position:fixed?](https://stackoverflow.com/questions/19501919/difference-between-positionsticky-and-positionfixed) — ControlAltDel, Jul 14 '21 at 20:21

score 1 · Answer 1 · answered Jul 14 '21 at 23:08

1

Consider making the div that contains all the content that you want and set its background to the image that you want. Then set the content that you want inside that div and align it at the bottom.

answered Jul 14 '21 at 23:08

Christian Rudder

71
6

score 1 · Answer 2 · answered Jul 20 '21 at 07:03

Use position: sticky;, works in most browsers

.sticky-header {
  position: sticky;
  top: 0px;
}
.sticky-header img {
  width: 100%;
}

<div class='sticky-header'>
<img src = 'https://via.placeholder.com/500x100'>
</div>
<h1>Lorem ipsum dolor sit amet consectetuer adipiscing elit
</h1>


<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa
  <strong>strong</strong>. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet
  nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede <a class="external ext" href="#">link</a> mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate
  eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies
  nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>


<h1>Lorem ipsum dolor sit amet consectetuer adipiscing elit
</h1>


<h2>Aenean commodo ligula eget dolor aenean massa</h2>


<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
  sem.</p>


<h2>Aenean commodo ligula eget dolor aenean massa</h2>


<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
  sem.</p>


<ul>
  <li>Lorem ipsum dolor sit amet consectetuer.</li>
  <li>Aenean commodo ligula eget dolor.</li>
  <li>Aenean massa cum sociis natoque penatibus.</li>
</ul>


<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
  sem.</p>


<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
  sem.</p>

Keep one element fixed and allow others to scroll as mobile browser address bar collapses on scroll up

2 Answers2