在屏幕上向下滾動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/