Question

我有一个页面，我希望在页面中间的右侧列上运行一个长图像。在内容之前，页面上有一个标题，将此图像向下推约300px。我正在使用固定定位来让图像跟随用户，因为它们向下滚动页面。

这个工作正常，直到我使用尺寸较小的浏览器并切断图像的底部。当我向下滚动页面时，图像仍然跟着我，但仍然总是被切断，即使标题不在视野范围内，也应该有足够的空间来容纳它。

当我滚动时，是否有任何方法可以将此位置保持固定，但是当向下滚动时将其对齐到浏览器的顶部？

我所拥有的只是现在。我仍然围绕着css，我找不到解决方案：

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

Answer 1

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

编辑 - 将以下脚本添加到页面中以执行注释中讨论的内容（如果已经有了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>

让我知道这是否有效

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

1 个答案: