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

使用固定位置和挂钩到窗口滚动事件并使用滚动
使用绝对位置（因此图像随窗口滚动）并再次使用水平滚动条上的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});
        } 
    });
 });

css图像垂直水平固定

2 个答案: