html - css 图像固定水平绝对垂直

Question

我目前在一个设置为固定的 div 中有一个图像，我喜欢它的行为方式，但是我希望它在上下滚动时也表现得好像它是绝对的。所以换句话说，我想要固定的水平行为，但绝对垂直(以便我向其中添加内容并可以向下滚动并查看整个图像)。希望我很清楚。这是我的 html:

<div id="graphpaper">   
    <img src="Background2.jpg" />
</div>

我的CSS:

#graphpaper{
    position:fixed;
    left:50%;
    margin-left:-800px;

    width:1600px;
    height:1600px;

    z-index:-10;
}

Answer 1

这不是一个简单的话题。实现它的唯一方法是使用 javascript。你必须有 2 种方法来做到这一点。

1. 使用 position fixed 和 hook to windows scroll event 并用 javascript on scroll 改变垂直位置
2. 使用绝对位置(这样图像会随窗口滚动)，然后在水平滚动时再次使用 javascript 更改水平位置。

一个基本的例子(它不会工作，但这是你需要开始的):

$(window).scroll(function(){        
    $('#fixedImage').css('top', $(window).scrollTop());
});