gpt4 book ai didi

javascript - 保持一个元素固定并允许其他元素滚动,因为移动浏览器地址栏在向上滚动时折叠

转载 作者:行者123 更新时间:2023-12-04 07:22:51 25 4
gpt4 key购买 nike

我正在尝试解决一个问题,本地址栏和下面的内容向上滚动时,我需要背景图像保持原位。
图片占据了 View 高度的 90%,本地址栏隐藏时,我已经使用 JS 停止了这种调整大小和跳转,但是本地址栏隐藏时,图片仍然会随着我的网站正文向上移动。
我的目标是无论如何都将图像固定到位,这样当您开始滚动时,屏幕底部附近的内容和地址栏会同时向上滚动,并且图像保持在同一位置。在视口(viewport)开始改变之前,这很简单!
阻止地址栏隐藏不是一种选择。
这是我想要实现的目标的代表,以我的狗为特色
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;
}

我在想也许我可以将图像相对于视口(viewport)的底部定位,并让它在地址栏下溢出,但我不确定如何实现这一点。我现在将继续尝试这个,但我需要很长时间才能弄清楚,所以如果有人可以给我一些指示或者是否有另一种方法,我真的很感激听到它!
谢谢

最佳答案

考虑制作包含您想要的所有内容的 div,并将其背景设置为您想要的图像。然后在该 div 中设置您想要的内容并将其与底部对齐。

关于javascript - 保持一个元素固定并允许其他元素滚动,因为移动浏览器地址栏在向上滚动时折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68384547/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com