Question

我想在屏幕上向下滚动200px时更改div“box”大小。

我希望在屏幕达到200px或更高后，“盒子”的宽度变为20px，一旦用户向上滚动超过200px，该盒子也必须返回其原始尺寸;

我必须在Jquery中这样做吗？如果可以，任何身体都能告诉我吗？

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

感谢您的帮助

.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/

如何在屏幕上滚动200px后更改图像大小。

2 个答案: