將div粘貼到父元素的頂部

Question

我想將div粘貼到其父元素的頂部。

它通常有效，除了在這個例子中： http ： //jsfiddle.net/HV9HM/2859/

 function sticky_relocate() { var window_top = $('#container').scrollTop(); var div_top = $('#sticky-anchor').offset().top; if (window_top > div_top) { $('#sticky').addClass('stick'); $('.stick').css('width', $('#sticky').next().css('width')); } else { $('#sticky').removeClass('stick'); } } $(function () { $('#container').scroll(sticky_relocate); sticky_relocate(); }); 

 .child { height: 200px; background: gray; } #sticky { padding: 0.5ex; width: 600px; background-color: #333; color: #fff; font-size: 2em; border-radius: 0.5ex; } #sticky.stick { position: fixed; z-index: 10000; border-radius: 0 0 0.5em 0.5em; } body { margin: 1em; } p { margin: 1em auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <br> <br> <br> <div id="container" style="overflow-y: auto; height: 800px;"> <div id="sticky-anchor"></div> <div id="sticky">This will stay at top of page</div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> 

問題是如果你將被稱為container的div滾動到底部，div將滾動到頂部（這是一個錯誤）。

如果您將另一個子項添加到div：

<div class="child"></div>

有用..

你可以在這里看到工作小提琴： http ： //jsfiddle.net/HV9HM/2860/

 function sticky_relocate() { var window_top = $('#container').scrollTop(); var div_top = $('#sticky-anchor').offset().top; if (window_top > div_top) { $('#sticky').addClass('stick'); $('.stick').css('width', $('#sticky').next().css('width')); } else { $('#sticky').removeClass('stick'); } } $(function () { $('#container').scroll(sticky_relocate); sticky_relocate(); }); 

 .child { height: 200px; background: gray; } #sticky { padding: 0.5ex; width: 600px; background-color: #333; color: #fff; font-size: 2em; border-radius: 0.5ex; } #sticky.stick { position: fixed; z-index: 10000; border-radius: 0 0 0.5em 0.5em; } body { margin: 1em; } p { margin: 1em auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <br><br><br> <div id="container" style="overflow-y: auto; height: 800px;"> <div id="sticky-anchor"></div> <div id="sticky">This will stay at top of page</div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> 

（不同的是，第一個小提琴的孩子少了一個child ）。

任何幫助贊賞！

Answer 1

發生這種情況的原因是，只要你給position: fixed到你的#sticky元素，就會把它從文檔流中取出來。 這意味着所有div.child元素都會向上移動，這會使容器元素的高度變小。 因為容器元素高度變小，容器元素不再需要滾動，這意味着它的滾動條消失並且其滾動位置重置為0.當其滾動位置重置為0時，腳本將再次從您的#sticky刪除stick類#sticky元素，我們回到我們開始的地方，但容器元素一直滾動到頂部。

綜上所述：

1. #sticky元素獲取.stick類。

2. #sticky元素從文檔流中刪除，子元素向上移動，容器元素高度減小，滾動條消失。 Container的scrollTop重置為0。

3. 腳本再次觸發，從#sticky刪除.stick類，容器的scrollTop保持為0（因此容器div向上滾動到頂部）。

下面是對#sticky元素使用position: absolute的解決方案，當#sticky元素獲得stick類時，它為#sticky-anchor #sticky #sticky-anchor元素提供一個高度等於#sticky元素的高度以防止子divs從向上移動。

---

現場演示：

 function sticky_relocate() { var window_top = $('#container').scrollTop(); var div_top = $('#sticky-anchor').offset().top; $('.stick').css('width', $('#sticky').next().css('width')); if (window_top > div_top) { $('#sticky-anchor').height($("#sticky").outerHeight()); $('#sticky').addClass('stick'); $("#sticky").css("top", (window_top) + "px"); } else { $('#sticky').removeClass('stick'); $('#sticky-anchor').height(0); } } $(function () { $('#container').scroll(sticky_relocate); sticky_relocate(); }); 

 .child { height: 200px; background: gray; } #sticky { padding: 0.5ex; background-color: #333; color: #fff; font-size: 2em; border-radius: 0.5ex; } #sticky.stick { position: absolute; top: 0; z-index: 10000; border-radius: 0 0 0.5em 0.5em; } body { margin: 1em; } p { margin: 1em auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <br> <br> <br> <div id="container" style="overflow-y: auto; height: 800px; position: relative;"> <div id="sticky-anchor"></div> <div id="sticky">This will stay at top of page</div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> 

JSFiddle版本： http ： //jsfiddle.net/HV9HM/2883/

---

作為旁注，在第二個示例中它正常工作的原因是附加的子元素使得即使從文檔流中刪除#sticky元素並且容器元素的高度減小，容器元素的高度也是如此仍然足夠大，以防止滾動條跳躍/消失和更改/重置您的scrollTop 。

Answer 2

雖然這個特定問題的最佳答案顯然是@MaximillianLaumeister，但這里是將元素固定到另一個元素的通用解決方案。

系鏈

Tether是一個JavaScript庫，用於有效地使絕對定位的元素保持在頁面上的另一個元素旁邊。

系繩包括約束視口中的元素，其滾動父級，頁面上的任何其他元素或固定邊界框的能力。

http://github.hubspot.com/tether/

Answer 3

<table>
<tr class="relative" id="header">
    <td>header
    </td>
</tr>

<tr id="content">
    <td>table content
    </td>
</tr>    

$(window).scroll(function() {

      if ($(window).scrollTop() > 140) {
        $("#header").addClass("fixed");
      } else {
        $("#header").removeClass("fixed");
      }
});

從以下示例中獲取參考https://jsfiddle.net/nckv9mso/

Answer 4

以及position:fixed; 你還需要為粘性導航欄提供比z-index:blah;相同頁面的其他元素更高的z-index值z-index:blah;

Answer 5

當容器高度為x並且容器的內容小於x + 36px時，出現問題。 在此示例中，容器為800px，內容小於836px。 我對解決方案的想法是檢查內容的高度並將其與容器的高度進行比較，如果差異小於36px，則不要添加棒類。

Answer 6

它非常簡單，只需為特定的粘性div添加以下樣式。

粘性{position：fixed;}