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。你必须有两种方法来做到这一点。

1. 使用位置固定和挂钩到 Windows 滚动事件并在滚动时使用 javascript 更改垂直位置
2. 使用绝对位置（因此图像随窗口滚动）并再次在水平滚动上使用 javascript 更改水平位置。

一个基本示例（它不起作用，但这是您需要开始的）：

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

Answer 2

谢谢你的帮助。我找到了解决方案：这基本上会将固定的 div 向上移动（注意 scrollVar 前面的否定符号），这将类似于绝对可滚动的行为。

$(document).ready(function() {
   $(window).scroll(function() {
       var scrollVal = $(this).scrollTop();
        if ( scrollVal >= 0) {
            $('#graphpaper').css({'position':'fixed','top' :-scrollVal});
        } 
    });
 });