在滾動上向下移動圖像

通常當您在頁面上向下滾動時，內容向上移動。在滾動上向下移動圖像

我需要創建類似於窗簾的東西。想象一下帶有一個窗口（一個div）的牆（您的瀏覽器），其頂部有一個下拉陰影（圖像）。讓我們假裝它在頂部：-100px。當你拉下陰影（向下滾動div）時，陰影（圖像）'就會顯現出來。' （雲從頂部：-100px位置，頂部：！0像素的位置，來填補你的窗口

任何幫助，將不勝感激

這是我所管理的一個基本樣機一起這樣拼湊到目前爲止，從這裏淘類似的問題。這顯然不工作，它不是rELAVENT什麼，我想都做，但我試圖使它relavent，但無濟於事。

<!DOCTYPE html> 
<html> 
<head> 

<script> 
var $scrollingDiv = $("#aerobot"); 
$(window).scroll(function() { 
    $scrollingDiv.stop().animate({ 
     "marginTop": ($(window).scrollTop() + 30) + "px" 
    }, "slow"); 
}); 
</script> 

<style> 
body { 
    height: 600px; 
    overflow:scroll; 
} 
#one { 
    width: 300px; 
    height: 400px; 
    position:relative; 
    float:left; 
    background-color:pink; 
} 
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; 
} 
</style> 
</head> 


<body> 

<div id="parent"> 
    <img title="yo" src="images/aerobot.png" id="aerobot" align="right" /> 
    <div id="one"></div> 
</div> 

</body> 
</html>

任何幫助會超級讚賞！

來源

2014-01-10 Potts

事情是[**這**]（http://jsfiddle.net/A5f4r/）？ – akinuri

我相信這是下面評論的用戶也想到的。我在對tehm的回覆中詳細闡述了一下，但爲了清晰起見，我將它添加到了OP中。我真正想要的是更像是一個窗簾，用滾動條向下滾動。從頂部的-px位置移動到0px位置，以填充整個div框架。 – Potts

真的沒有多少時間，但讓我們試試[** this **]（http://jsfiddle.net/A5f4r/1/） – akinuri

的方式這裏是你的代碼。我認爲這是不言自明的。

var img = document.getElementById("aerobot"); 
window.onscroll = function() { 
    var bodyHeight = parseInt(getComputedStyle(document.body).height, 10); 
    var scrollLimit = bodyHeight - window.innerHeight; 
    var scrollTop = document.body.scrollTop; 
    var scrollPCT = (scrollTop/(scrollLimit/100))/100; 
    img.style.top = bodyHeight * scrollPCT - img.offsetHeight + "px" ; 
}

FIDDLE

來源

2014-01-14 19:25:21 akinuri

非常感謝！我們設法讓它完美運作。 – Potts

一個簡單的方法來獲取圖片留在最初放置的地方是使用CSS。

做到這將是一個position: fixed;

來源

2014-01-10 22:26:34 frosty11x

我不希望它留在一個地方，但我希望它隨着頁面滾動而向下移動，就像我在OP中所說的那樣。例如，想象一個帶有下拉陰影的窗戶的牆。牆是你的瀏覽器窗口，窗口是一個div，陰影是一個圖像。當你拉下窗簾時，從頂部出現，填滿窗戶。那就是我想要做的。 div中的圖像，從頂部的隱藏位置向下移動以填充div框架。 – Potts

好的，如果你給所有其他東西一個固定的位置，而不是給圖像一個固定的位置，我相信它會出現你想要的。 – frosty11x

在滾動上向下移動圖像

回答

相關問題