保持一个元素固定，并允许其他元素在移动浏览器地址栏向上滚动时滚动

Question

我正在尝试解决一个问题，当地址栏和下面的内容向上滚动时，我需要一个背景图像留在适当的位置。

图片占据了视图高度的90%，当地址栏隐藏时，我使用了JS来停止这种大小调整和跳转，但当地址栏隐藏时，图片仍然会随着网站的主体向上移动。

我的目标是无论如何都要将图像固定在适当的位置，以便当您开始滚动时，屏幕底部附近的内容和地址栏同时向上滚动，而图像保持在相同的位置。这很简单，直到视口开始改变！

防止地址栏隐藏不是一个好的选择。

这是我想要达到的效果，以我的狗为特色

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;
}

我在想，也许我可以将图像相对于视图端口的底部定位，让它在地址栏下面溢出，但我真的不确定如何实现这一点。我现在将继续尝试，但这将花费我很长的时间来弄清楚，所以如果有人能给我一些指点，或者如果有其他方法，我将非常感谢听到它！

谢谢

Answer 1

考虑创建包含所有所需内容的div，并将其背景设置为所需的图像。然后在div中设置你想要的内容，并在底部对齐。

Answer 2

使用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>

​