防止覆盖其他Div

需要一些帮助。我的设置：防止覆盖其他Div

我有一个固定的股利（ “myFixedDiv”）滚动，直到时留在地方 “myFixedDiv” 到达另一个DIV（ “页脚”）。然后它随着滚动而移动。
div“myFixedDiv”使用：display：inline-block放置在div（“text”）旁边。

现在我的问题：

当窗口水平变得更小，“myFixedDiv”垂直放置视意“textDiv”之后。唯一的问题是，“myFixedDiv”的上半部分显然与“textDiv”重叠，覆盖了部分文本。我希望“myFixedDiv”垂直放置在“textDiv”之后，通过向下推“footer”来允许这样做。

在这里看到一个例子： 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'); } });

来源

2016-03-15 Eddy

改变固定位置的div相对位置，当你调整窗口的大小，它应该是不错的

See this fiddle

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

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

来源

2016-03-15 14:27:28

谢谢！但是，我希望只要“myFixedDiv”离开内联位置，那时就会发生一些事情来解决问题。或者，在令人兴奋的代码中，需要更改（或添加）值以防止“myFixedDiv”覆盖“textDiv”。 – Eddy

解决它：

$(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); 
    } 
});

来源

2016-03-15 18:41:54 Eddy

防止覆盖其他Div

回答

相关问题