2014-03-27 26 views
0

我已經設法得到一個可摺疊的固定標題的縮略當用戶滾動過去某個點的工作版本,但我真正想要做的是有縮小狀態下的實際圖像變化。摺疊固定標題(在滾動)替換圖像 - javascript

這裏是目前的標題http://kmmedia.com.au/test/index.html,你可以看到它縮小了圖像。

我實際上希望圖像的較小版本成爲徽標的紅色部分而沒有寫入(如此不同的圖像)。喜歡這個網站http://byassociationonly.com/

我想有自己的填充,以獲得初始狀態,它的垂直居中,然後滾動有發言權10px的填充頂部和底部...

什麼想法?

回答

0

使用jQuery的動畫...

$('header').animate({ 
     height: '47px'}, 300); 
    $('nav').animate({ 
     width: '80px'}, 300); 

,你可以在這裏看到演示...

JS Fiddler Demo

+0

好極了!那正是我所追求的。是否可以添加填充或邊距到較小的版本?我正在嘗試,但因爲它是一個背景圖片,所以它的表演很有趣且重複。 你真的可以縮小圖像的百分比嗎? – Plaedien

+0

設置'background-repeat:no-repeat' – Leo

+0

**編輯**我意識到如果你在jscript中改變高度而不是在css中它做了我所需要的,儘管我無法居中放大版本。 。 – Plaedien