在窗口滾動更改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寬度

回答

相關問題