Fatal编程技术网

Javascript 将图像向下滚动

javascript html

Javascript 将图像向下滚动,javascript,html,Javascript,Html,通常，当您向下滚动页面时，内容会向上移动 我需要创建一个类似于窗帘的东西。想象一下，一堵墙（你的浏览器）上有一个窗口（一个div），顶部有一个下拉式阴影（图像）。让我们假设它在顶部：-100px。当您向下拉遮阳帘（向下滚动div）时，遮阳帘（图像）会“自行显示”。（从顶部：-100px位置转到顶部：0px位置，以填充您的窗口 任何帮助都将不胜感激 这是一个基本的模型，到目前为止，我已经设法拼凑起来，从这里搜索类似的问题。它显然不起作用，它与我想做的事情根本不相关，但我试图使它相关，但没有用 &l

通常，当您向下滚动页面时，内容会向上移动

我需要创建一个类似于窗帘的东西。想象一下，一堵墙（你的浏览器）上有一个窗口（一个div），顶部有一个下拉式阴影（图像）。让我们假设它在顶部：-100px。当您向下拉遮阳帘（向下滚动div）时，遮阳帘（图像）会“自行显示”。（从顶部：-100px位置转到顶部：0px位置，以填充您的窗口

任何帮助都将不胜感激

这是一个基本的模型，到目前为止，我已经设法拼凑起来，从这里搜索类似的问题。它显然不起作用，它与我想做的事情根本不相关，但我试图使它相关，但没有用

<!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>


变量$scrollingDiv=$（“#aerobot”）；
$（窗口）。滚动（函数（）{
$scrollingDiv.stop（）.animate({
“marginTop”：（$（窗口）.scrollTop（）+30）+“px”
}“慢”）；
});
身体{
高度：600px；
溢出：滚动；
}
#一个{
宽度：300px；
高度：400px；
位置：相对位置；
浮动：左；
背景颜色：粉红色；
}
img{
z指数：1000；
排名：0；
位置：绝对位置；
宽度：350px；
高度：50px；
背景颜色：蓝色；
右：0；
显示：块；
}
#母公司{
宽度：400px；
高度：400px；
背景色：红色；
位置：相对位置；
显示：块；
}
任何帮助都将不胜感激！

要想让图片停留在原来的位置，一个简单的方法就是使用css

这样做的方法是使用
位置：fixed；

这是您的代码。我认为这是不言自明的

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" ;
}

类似的东西？我相信下面发表评论的用户也想到了这一点。我在回复tehm时详细阐述了一点，但为了清晰起见，我会将其添加到我的OP中。我真正想要的东西更像是一个用滚动条向下滚动的窗帘。从顶部的-px位置，到0px位置，这样它就填满了整个div帧.没有花太多时间，但让我们试试这是一个更好的版本。啊，是的！第二个例子正是我想做的！非常感谢！！我不希望它停留在一个地方，我希望它在页面滚动时向下移动，就像我在我的作品中所说的那样。例如，想象一堵墙上有一个带有下拉式遮阳帘的窗户。我这是你的浏览器窗口，窗口是一个div，阴影是一个图像。当你拉下阴影时，它从顶部出现，填充窗口。这就是我想做的。一个div中的图像，从顶部的隐藏位置向下移动，填充div框架。好的，如果你给其他所有东西一个固定的位置，而不是给图像一个fixed位置，我相信它会像你想要的那样。再次非常感谢！我们成功地使它工作得很好。