gpt4 book ai didi

jquery - 如何实现页面向上滚动显示的固定 'contact details' 面板?

转载 作者:太空宇宙 更新时间:2023-11-04 04:57:53 24 4
gpt4 key购买 nike

我能解释效果的最好方法是通过这个网站的例子...

http://www.optimus2020.com/

有什么想法吗?这是一个巧妙的技巧。

最佳答案

看起来“面板”已被赋予 position: fixed; 并使用 z-index 放置在主要内容的后面。滚动内容的底部边距/填充等于面板的高度。使用这种技术,浏览器将滚动“过去”内容,显示底层面板。

我个人认为这有点奇怪,但我就是这样。

代码示例

<html>
<head><title>Test</title></head>
<body>

<style type="text/css">
#content {
position: relative;
z-index: 10;
height: 1000px;
background: #fff;
margin-bottom: 100px;
}

#panel {
z-index: 1;
width: 100%;
height: 100px;
background: #00f;
color: #fff;
position: fixed;
bottom: 0;
}
</style>

<div id="content">Content</div>
<div id="panel">Panel</div>

</body>
</html>

关于jquery - 如何实现页面向上滚动显示的固定 'contact details' 面板?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12058138/

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