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

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


我有一个固定的Div（“ myFixedDiv”），在滚动到
“ myFixedDiv”到达另一个div（“页脚”）。然后它随着滚动移动。
使用以下命令将Div“ myFixedDiv”放置在div（“文本”）旁边：display：inline-block。


现在针对我的问题：

当水平缩小窗口时，将“ myFixedDiv”垂直放置在“ textDiv”之后。唯一的是，“ myFixedDiv”的上半部分明显与“ textDiv”重叠，覆盖了部分文本。我希望通过向下压“页脚”将“ 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'); } });

最佳答案

调整窗口大小时，将固定位置更改为div的相对位置，应该很好

See this fiddle

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

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