Question

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

我需要创建类似于窗帘的东西。想象一下墙（你的浏览器）有一个窗口（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>

任何帮助都会超级赞赏！

Answer 1

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

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

Answer 2

让图片保持最初放置位置的简单方法是使用css。

执行此操作的方法是使用position: fixed;

在滚动上向下移动图像

2 个答案: