1

如果有人能告诉我一旦用户开始滚动，这个网站是如何实现徽标消失的，那将不胜感激！如果您查看左上角的徽标，一旦您开始滚动，它就会消失。这叫什么技术？这是用javascript完成的吗？

http://www.studioudge.com/

提前致谢！

4

3 回答 3

2

不。标志被放置在一个“普通”容器内，与页面的其余部分一起滚动；菜单改为“固定”菜单，不会滚动。此外，还使用了一个技巧来在菜单顶部显示徽标，并在其后面显示网站内容。很不错的效果，没见过。

基本 HTML/CSS 代码和工作示例：http: //jsfiddle.net/cs7Nk/ :-)

于 2012-05-15T16:27:30.790 回答
2

您可以通过固定的 css 属性进行简单的操作。

示例：

<div id="main">
  Test Content
</div>

<div id="content">
  Add some more content here for result.
</div>

<style type="text/css">
  #main {
    width: 100%;
    height: 60px;
    background: green;
    position: fixed;
    z-index: 1000; /* Z-Index for making this div always on top */
  }

  #content {
    width: 960px; margin:0 auto; position: relative; background: blue;
  }

</style>
于 2012-05-15T16:40:20.380 回答
1

我相信正在发生的事情是标题的属性background-attachment设置为scroll.

徽标不是标题的一部分（它只是位于顶部z-index），因此它不会获得滚动效果。

于 2012-05-15T16:30:35.090 回答