在屏幕上向下滚动200px后如何更改图像尺寸。

Question

当您向下滚动200px时，我想更改div“框”大小的大小。

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

我必须在Jquery中这样做吗？ 如果可以的话，任何人都能向我展示？

我做了一个小提琴来展示我的工作。

谢谢你的帮助

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);

Answer 2

使用jQuery，我会使用类似

$( window ).scroll(function() {
     if($(window).scrollTop() > 200){
       $('.box').css({'height': '50'}); 
     }else{
         $('.box').css({'height': '100'}); 
     }

});

HTML

<div class="wrap">
    <div class="header">
        <div class="box"></div>
    </div>
</div>

CSS

.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;
}

jsFiddle演示： http : //jsfiddle.net/LLbAu/