2014-03-14 36 views
-1

我是網絡編碼新手。請原諒我,如果我問一些愚蠢的:/ 我有一個菜單欄在上面。 波紋管是一個有圖像的Div。 當我滾動時,我想讓圖像縮小到菜單欄上的徽標。什麼是「技能」電話?大多數搜索只顯示縮小菜單欄,但我想縮小圖像的標誌。 我已經嘗試過很多學期的Google,但是我仍然無法找到這個「技能」這個詞,請幫助我。將圖像收縮到菜單欄上的徽標

<div id="menubar">Main Bar Here</div> 
<div id="topcontent"> 
<img src="img.jpg" /> <----this image will shrink up to the menu bar when i scroll down. 
</div> 

例這樣的標誌http://thebiggroup.co/planb/,將旋轉起來,但我婉附加給它貼到菜單欄。

謝謝

+0

歡迎來到SO。你能向我們展示你所做的實際代碼嗎?我們可以合作的東西?我看到你的英文不是很完美,所以它很難理解你需要什麼。 – LOTUSMS

+0

@LOTUSMS的Jquery或JS部分我現在沒有任何想法。我試圖尋找這個技術的術語。我不知道我需要在jquery上使用$()。scroll()函數。 TQ – user3418336

+0

你應該發佈你到目前爲止嘗試過的任何東西。 –

回答

1

你將從這個鏈接Scroll Division

+0

這不會幫助他。你發佈的是一個滾動到頂部的腳本..不是這裏的情況 – LOTUSMS

+0

至少他可以從中得到啓發,他可以讓他的問題更加清晰。 –

+1

我聽到你的聲音,但這是他的錯誤方向。有人可能會讓你失望。我不會,但有人可以。小心 – LOTUSMS

0

一些想法試試這個代碼,活生生的例子here

<head> 
    <script> 
    function functionScroll(){ 
    var div = document.getElementById('topDiv'); 
    div.style.width="50px"; 
    div.style.height="50px"; 
    }; 
    </script> 
</head> 
<body> 

<div id="topDiv" style="width:100px;height:100px;border:1px solid red;"></div> 
<div style="height:100px;width:700px;border:1px solid black;overflow-x:hidden" onscroll="functionScroll()"> 
    <p>asasaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> 
    <p>asasaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> 
    <p>asasaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> 
    <p>asasaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> 
    <p>asasaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> 

</div> 
</body> 

關鍵是要調用的函數divonscroll和在該功能中更改您的div的尺寸。在您的情況下,您可以用您的img替換div,或者您可以將img設置爲div的背景。

+0

對不起,我沒有得到這是什麼與圖像相關? TQ – user3418336

+0

@ user3418336檢查編輯答案 –

相關問題