javascript - 防止固定 Div 覆盖其他 Div

Question

需要一些帮助。 我的设置:

1. 我有一个固定的 Div(“myFixedDiv”)，当滚动到 “myFixedDiv”到达另一个 div(“页脚”)。然后它会随着滚动而移动。
2. 使用以下命令将 Div“myFixedDiv”放置在 div(“文本”)旁边:display:inline-block。

现在解决我的问题:

当窗口水平变小时，“myFixedDiv”按预期垂直放置在“textDiv”之后。唯一的问题是，“myFixedDiv”的上半部分明显与“textDiv”重叠，覆盖了部分文本。我希望通过向下推“footer”来将“myFixedDiv”垂直放置在“textDiv”之后。

请参阅此处的示例: JSFIDDLE 在缩小窗口后，您可能需要稍微滚动一下才能使“myFixedDiv”再次可见。

$(document).scroll(function() { var $self = $("#myFixedDiv"); $self.css('margin-top', 0); var myFixedDivOffset = $self.offset().top + $self.outerHeight(true); if (myFixedDivOffset > ($("#footer").offset().top - 30)) { $self.css('margin-top', -(myFixedDivOffset - $("#footer").offset().top)); } else { $self.css('margin-top', '30px'); } });

Answer 1

调整窗口大小时将固定位置更改为 div 的相对位置，效果应该不错

See this fiddle

$(window).resize(function() {
    $("#myFixedDiv").css('position','relative');
});

您还可以添加基于 body 宽度的条件，将 div 的 CSS 更改为相对或固定位置。