將圖像收縮到菜單欄上的徽標

-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/，將旋轉起來，但我婉附加給它貼到菜單欄。

謝謝

來源

2014-03-14 user3418336

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

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

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

你將從這個鏈接Scroll Division

來源

2014-03-14 04:30:09

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

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

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

一些想法試試這個代碼，活生生的例子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>

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

來源

2014-03-14 05:01:55

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

@ user3418336檢查編輯答案 –

將圖像收縮到菜單欄上的徽標

回答

相關問題