防止覆蓋其他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

回答

相關問題