创建一个在您向下滚动时消失/缩小的div？

我有兴趣创建类似标题的div的东西在这里：http://abduzeedo.com/brainstorm-9-logo-process 创建一个在您向下滚动时消失/缩小的div？

我知道HTML会看起来有点像这样：

<div class="menu"> 
    <!--Fixed menu--> 
</div> 

<div class="headerimg"> 
    <!--Image that would disapear--> 
</div> 

<div class="content"> 
    <!--Content stuff here--> 
</div>

但我不知道如何做到这一点的jQuery/CSS方面。有任何想法吗？

感谢，哈里森

来源

2013-02-21 Harrison Howard

绑定页面滚动到图像'变换：平移Y（）'属性与jQuery/JS。 – jOpacic 2013-02-21 23:56:55

你有没有看到源代码和/或用Firebug之类的东西来检查它？ – Jim 2013-02-21 23:59:50

@Jim，过去我已经这样做了，但我正在寻找比代码能给我更详细，直接的答案，谢谢。 – 2013-02-22 00:54:54

继承人小提琴做（没有什么特别的，主要是打带位置：固定;而Z-指数）：http://jsfiddle.net/zrYTm/7/

HTML：

<div class="menu"> Lorem ipsum dolor...</div> 

<div class="headerimg"> Sed aliquam, lectus...</div> 

<div class="content"> Fusce at neque...</div>

CSS：

.menu { 
    position: fixed; 
    z-index: 1000000; /* highest z-index on page */ 

    top: 0; 
    left: 0; 
    right: 0; 
    height: 100px; 
    background-color: red; 
} 

.headerimg { 
    position: fixed; 
    z-index: 0; /* Lowest z-index */ 

    top: 100px; 
    left: 0; 
    right: 0; 
    height: 100px; 
    background-color: green; 
} 

.content { 
    position: relative; 
    z-index: 1000; /* Medium z-index */ 

    margin-top: 200px; /* Heigth of header and menu */ 

    height: 1000px; 
    background-color: blue; 
} 

div { 
    overflow: hidden; 
}

来源

2013-02-22 00:14:33 Jost

谢谢！它很好，在你和奥雷之间，他们都工作。所以对于我选择你的答案，因为你在哪里第一次。谢谢！ – 2013-02-22 00:53:33

使用你的html，这里是css：

.menu, .headerimg, .content { 
    width: 100%; 
} 
.menu { 
    background: red; 
    height: 50px; 
    position: fixed; 
    top: 0; 
} 
.headerimg { 
    background: yellow; 
    height: 100px; 
    position: fixed; 
    top:50px; 
    z-index: -2; 
} 
.content { 
    height: 1000px; 
    background: gray; 
    z-index:50; 
    margin-top: 160px; 
}

我们得到.headerimg滚动速度较慢，则.content，使用jQuery

的该位

$(document).ready(function() { 
window.onscroll = function() { 
    n = Math.ceil($("body").scrollTop()/4); 
    $(".headerimg").css("-webkit-transform", "translateY(-" + n + "px)"); 
    $(".headerimg").delay(1300).css("-moz-transform", "translateY(-" + n + "px)"); 

} 
})

http://jsfiddle.net/akurtula/3w9Dv/1

来源

2013-02-22 00:38:24 aurel

谢谢！它工作得很好，在你和约斯特之间，他们都工作。所以为了答案，我选择他，因为他是第一个接受它的人。尽管非常感谢！ – 2013-02-22 00:54:03

创建一个在您向下滚动时消失/缩小的div？

回答

相关问题