如何在屏幕上向下滾動200px後更改圖像的大小。

Question

我想在屏幕上向下滾動200px時更改div的「框」大小。

我想讓「box」在屏幕達到200px或更多後變成20px的寬度，一旦用戶滾動到200px以上，該框也必須返回到原來的大小;

我必須在Jquery中做到這一點嗎？如果有的話，任何機構都可以展示我

我已經做了一個js小提琴來顯示我的工作。

感謝您的幫助

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/