在窗口滚动更改div宽度

我正在试图对像车库门一个div的JavaScript效果。
基本上我会在后面有一个绝对的div，前面的另一个div会从窗口学校的底部到顶部缩小。在窗口滚动更改div宽度

我发现了一个类似的jsfiddle，但是它的宽度取决于高度，我希望div顶部保持固定并从底部到顶部缩小。

HTML 
<div id="added"> 

<div id="container"> 
    My center div... 
</div> 

</div> 

CSS 
#added { 
    background: #eee; 
    height: 2000px; 
    overflow:hidden; 
} 
#container { 
    width: 800px; 
    height: 2000px; 
    background-color: #567; 
    margin: 0 auto; 
    position:relative; 
} 

JS 
$(window).resize(function() { 
    $('#container').css({ 
     top: ($(window).height() - $('#container').outerHeight())/2 
    }); 
}); 



// To initially run the function: 
$(window).resize(); 


var $scrollingDiv = $("#container"); 
$(window).scroll(function() { 
    var winScrollTop = $(window).scrollTop() + 0, 
     zeroSizeHeight = $(document).height() - $(window).height(), 
     newSize = 800 * (1 - (winScrollTop/zeroSizeHeight)); 

    $scrollingDiv.css({ 
     width: newSize, 
     "marginTop": winScrollTop + "px" 
    }, 500, 'easeInOutSine'); 
});

任何帮助将不胜感激。

谢谢

来源

2013-06-21 onlymushu

你可以试试：

var $scrollingDiv = $("#container"), 
    defaultHeight = parseInt($scrollingDiv.css('height')); // whatever is in your css as 
$(window).scroll(function() { 
    var winScrollTop = $(window).scrollTop() + 0, 
     zeroSizeHeight = $(document).height() - $(window).height(), 
     newSize = defaultHeight * (1 - (winScrollTop/zeroSizeHeight)); 

    $scrollingDiv.css({ 
     height: newSize, 
     "marginTop": winScrollTop + "px" 
    }, 500, 'easeInOutSine'); 
});

来源

2013-06-21 14:15:11 Tronix117

感谢Tronix，这正是我想要的。现在唯一的问题是，如何让文本随着div消失？非常感谢。 – onlymushu

我真的不明白你的意思，当div变小时，文本应该隐藏起来，不是吗？否则，尝试在CSS中添加：“overflow：hidden”到这个div。 – Tronix117

现在工作正常。另外，它是我还是不是在铬或任何浏览器上工作，虽然它在JSFiddle上工作得很好。谢谢 – onlymushu

都设置到auto

CSS

#added { 
     background: #eee; 
     height: auto; 
     width: auto; 
     }

它会自动添加滚动条无须申请Java脚本

来源

2013-06-21 14:33:11 Amol

给我-ve投票的理由吗？ – Amol

在窗口滚动更改div宽度

回答

相关问题