Question

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

我有一个固定的Div（＆＃34; myFixedDiv＆＃34;）在滚动时保持不变＆＃34; myFixedDiv＆＃34;到达另一个div（＆＃34;页脚＆＃34;）。然后它随着滚动而移动。
The Div＆＃34; myFixedDiv＆＃34;使用：display：inline-block放在div旁边（＆＃34; text＆＃34;）。

现在我的问题：

当窗口水平缩小时，＆＃34; myFixedDiv＆＃34;在＆＃34; textDiv＆＃34;之后垂直放置如预期。唯一的问题是，＆＃34; myFixedDiv＆＃34;的上半部分。明显重叠＆＃34; textDiv＆＃34;，涵盖部分文本。我想要＆＃34; myFixedDiv＆＃34;在＆＃34; textDiv＆＃34;之后垂直放置通过推动＆＃34;页脚＆＃34;为了实现这一点。

在此处查看示例： JSFIDDLE 您可能需要提供一个小滚动，以便在使窗口变小后再次显示＆＃34; 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');
});

您还可以根据正文的宽度添加条件，将div的CSS更改为相对位置或固定位置。

Answer 2

解决了它：

$(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');
  }
});
$(window).resize(function() {
  if ($(window).width() < 601) $("#text").css('padding-bottom', '70px'); {
    $(window).scrollTop($(window).scrollTop() + 1);
    $(window).scrollTop($(window).scrollTop() - 1);
  }
});
$(window).resize(function() {
  if ($(window).width() > 600) $("#text").css('padding-bottom', '0'); {
    $(window).scrollTop($(window).scrollTop() + 1);
    $(window).scrollTop($(window).scrollTop() - 1);
  }
});

防止固定Div覆盖其他Div

2 个答案: