0

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

http://www.optimus2020.com/

有任何想法吗？这是一个巧妙的技巧。

4

1 回答 1

2

看起来已经给出了“面板”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>
于 2012-08-21T15:29:00.037 回答