當用戶滾動頁面時移動圖像（使用jQuery）？

Question

我有一個形象：

<img title="<?php echo JText::_('AEROBOT_HELLO'); ?>" src="images/aerobot.png" id="aerobot" align="right" /> 

我想移動的圖像（使其可見的任何時間），當用戶滾動頁面。 我試過這段代碼：

  var $scrollingDiv = $("#aerobot"); 

     $(window).scroll(function(){    
      $scrollingDiv 
       .stop() 
       .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow");   
     }); 

但它的移動的全部內容（這是根據圖像），我在頁面上。 那麼，如何只移動滾動的圖像？

Answer 1

使position:absolute和調整頂部和左側值：

img {z-index:1000;top:0; left:0;position:absolute;width: 300px; height: 50px; float:left;} 

這裏是例子的代碼，最小化瀏覽器滾動顯示出來

Example

使它留在它的父容器中，你必須把顯示出來：到它們兩個，位置：相對到父容器河右對齊放右：0來圖像;

img { 
    z-index:1000; 
    top:0; 
    position:absolute; 
    width: 350px; 
    height: 50px; 
    background-color:blue; 
    right:0; 
    display:block; 
} 
#parent{ 
    width: 400px; 
    height: 400px; 
    background-color:red; 
    position:relative; 
    display:block; 
} 

Example 2

Answer 2

無需使用JS：使用的CSS屬性position: fixed。它的行爲像絕對定位，但是當用戶滾動時，圖像不會向上或向下移動。