Question

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

http://www.studionudge.com/

提前致谢！

Answer 1

没有。徽标放在“普通”容器内，与页面的其余部分一起滚动;菜单改为“fixed”，不滚动。此外，还有一个技巧用于在菜单顶部显示徽标和其背后的网站内容。非常好的效果，我以前从未见过。

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

Answer 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>

Answer 3

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

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

滚动时HTML / CSS项目消失。

3 个答案: