向下滚动，向上移动div？

Question

我一直试图获得类似于http://www.geoffroydeboismenu.com/中可以找到的效果的效果，其中菜单通过向下滚动显示自身，在这种情况下，溢出，即“图片”div。

我有这个代码atm;

$(window).scroll(function(){            
    $("#container").stop().animate({ "marginTop": ($(window).scrollTop() + 30) + "px"}, "slow"); 
});

但它恰恰相反，我的div跟随滚动，而不是上升。

我希望我的#container div溢出我的#slider div。

Answer 1

这是一个jsFiddle示例：http://jsfiddle.net/Cc6sD/2/

我尽可能经常使用原生javascript来保持平滑（但您可以使用jQuery方法替换代码的某些部分，以确保完全跨浏览器兼容性。）

修改 的 我编辑了代码（它只适用于chrome）。它现在可以在所有浏览器中使用，除了在版本9之前的Internet Explorer中。如果您想支持旧的IE，请替换它：

var op = 1 - (window.pageYOffset / slider.offsetHeight);

由此：

var op = 1 - ($(document).scrollTop() / slider.offsetHeight);

---

代码：

<强> HTML：

<div id="slider"></div>
<div id="overflow"></div>

<强>的CSS：

#slider{
    width: 100%;
    background-color: red;
    height: 100%;
    position: fixed;
}
#overflow{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}

<强>的javascript / jQuery的：

var ovf, slider;

$(function(){
    ovf = this.getElementById("overflow");
    slider = this.getElementById("slider");
    winResize();
    $(window).bind({resize: winResize, scroll: winScroll});
});

function winResize(){   
    ovf.style.top = slider.offsetHeight + "px";
}

function winScroll(){
    var op = 1 - (window.pageYOffset / slider.offsetHeight);
    slider.style.opacity = op; 
}