固定定位会在浏览器太小时切断图像

Question

我有一个页面，我想在页面的中间位置沿右侧列运行长图像。页面上有一个标题，在内容之前，它将这张图片向下推了大约 300 像素。当用户向下滚动页面时，我使用固定定位来让图像跟随用户。

在我使用尺寸更小的浏览器并切断图像底部之前，这可以正常工作。当我向下滚动页面时，图像仍然跟随我，但始终被截断，即使标题不在视线范围内，也应该有足够的空间来容纳它。

有什么方法可以在我滚动时将其定位以保持固定，但在向下滚动时将其与浏览器顶部对齐？

我现在只有这个。我还在纠结css，只是找不到解决方案：

<div id="right_image" style="margin-top:0; position:fixed; width:150px; height:700px; display:block; border:none;"></div>

Answer 1

如果您指定bottom:0px（或其他值），那么它将始终固定在页面底部，不会在底部被截断。

编辑 -- 将以下脚本添加到页面以执行 cmets 中讨论的内容（如果您已经获得 jquery 引用，则可以删除它）：

<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script language='javascript' type='text/javascript'>
    $(document).scroll(function() {
        if($(this).scrollTop()==0) $('#right_image').css('bottom', '');
        else $('#right_image').css('bottom', '0px');
    });
</script>

让我知道这是否有效