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

Question

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

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

现在解决我的问题:

当窗口水平变小时，“myFixedDiv”按预期垂直放置在“textDiv”之后。唯一的问题是，“myFixedDiv”的上半部分明显与“textDiv”重叠，覆盖了部分文本。我希望“myFixedDiv”通过向下推“footer”来垂直放置在“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为相对或固定位置。