是否可以将 div 的右下角修复为屏幕 w.r.t 向上/向下滚动答案

【问题标题】：Is it possible to fix lower right corner of div to screen w.r.t scroll up/down是否可以将 div 的右下角修复为屏幕 w.r.t 向上/向下滚动
【发布时间】：2013-08-07 17:38:08
【问题描述】：

我想让 div 在向下滚动时垂直扩展，在向上滚动时垂直收缩，以使右下角在浏览器屏幕上大致保持相同的位置。

#resizable { 
position:relative; 
float:left; 
width: 300px; 
height: 200px; 
padding: 0.7em;
top:8px;
left:2px; 
word-wrap: break-word;}

div 需要是相对的且可调整的，以对齐环绕它的所有外部文本。

$(function() { $( "#resizable" ).resizable();});

http://jsfiddle.net/EYasQ/1/

【问题讨论】：

标签： javascript css html

【解决方案1】：

我可以在没有固定定位的情况下使用一点 Javascript 来做到这一点：http://jsfiddle.net/EYasQ/5/

$(document).scroll(function() {
   var top = $(document).scrollTop();
   $("#resizable").css("marginTop", top);
});

每当页面滚动时，scroll 事件侦听器将更新#resizable div 的上边距。 div 将显示在原地，但文本将围绕它重排。效果有点不寻常，但似乎符合你的要求。

【讨论】：

哦@nullability 我很荣幸为您提供如此简单的代码，您确实编写了所需的代码。

【解决方案2】：

您可以为此使用位置fixed：

#resizable { 
    position: fixed;
    ... 
}

http://jsfiddle.net/EYasQ/2/

【讨论】：

in position: fixed 外部文本将返回到 div。我不需要隐藏外部文本。

【解决方案3】：

使用固定位置而不是相对位置。由于您希望 div 位于右下角，请使用以下内容：

position:fixed; 
float:right; 
bottom:8px;
right:2px;

http://jsfiddle.net/EYasQ/3/

【讨论】：

在position: fixed 中，外部文本将返回到 div。我几乎不需要隐藏外部文本。