jquery - 如何在屏幕向下滚动 200 像素后更改图像大小。

Question

当您向下滚动屏幕超过 200 像素时，我想更改我的 div“框”大小。

我想在屏幕达到 200px 或更大后使“框”的宽度变为 20px，一旦用户向上滚动超过 200px，框也必须恢复到原来的大小；

我必须在 Jquery 中执行此操作吗？如果是这样，任何人都可以告诉我吗？

我制作了一个 js fiddle 来展示我的工作。

谢谢你的帮助

http://jsfiddle.net/UHAWV/

.wrap{
    min-height:1000px;
    background:grey;
}

.header{
    position:fixed;
    background:black;
    height:100px;
    width:100%;
    position:relative;
    position:fixed;
    top:0px;
}

.box{
    position:abosolute;
    top:2px;
    left:20px;
    background:red;
    z-index:999;
    height:100px;
    width:100px;
}

Answer 1

在纯 Javascript 中:

http://jsfiddle.net/UHAWV/1/

document.addEventListener("scroll", function() {
    scrollHeight = window.pageYOffset;
    document.getElementsByClassName("box")[0].style.height = scrollHeight >= 200 ? "20px" : "";
}, false);