将div粘贴到父元素

Question

我想将div粘贴到其父元素的顶部。

它通常有效，但在此示例中除外：http://jsfiddle.net/HV9HM/2859/

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

问题在于，如果将名为container的div滚动到底部，则div将滚动到顶部（这是一个错误）。

如果你将另一个孩子添加到div：

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

有效..

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

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

（不同之处在于，第一个小提琴的孩子少了一个班级child）。

任何帮助表示赞赏！

Answer 1

发生这种情况的原因是，只要您将position: fixed提供给#sticky元素，就会将其从文档流程中删除。这意味着您的所有div.child元素都会向上移动，这会使容器元素的高度变小。由于容器元素高度变小，容器元素不再需要滚动，这意味着其滚动条消失并且其滚动位置重置为0.当其滚动位置重置为0时，脚本将再次删除stick来自#sticky元素的类，我们回到了开始的位置，但容器元素一直滚动到顶部。

总结：

1. #sticky元素获得.stick类。

2. #sticky元素从文档流中删除，子元素向上移动，容器元素高度减小，滚动条消失。容器的scrollTop重置为0.

3. 脚本再次触发，从.stick中删除#sticky类，容器的scrollTop保持为0（因此容器div将向上滚动到顶部）。

以下是对position: absolute元素使用#sticky的解决方案，当#sticky元素获得stick类时，它会提供#sticky-anchor元素高度等于#sticky元素的高度，以防止子div向上移动。

现场演示：

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

<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 3

与.diamond { display: block; height: 30px; width: 30px; background-color: white; border: 2px solid #dcdcdc; transform: rotate(45deg);} 一起，您还需要为粘性导航栏提供比position:fixed;

相同页面的其他元素更高的z-index值

Answer 4

当容器高度为x且容器内容小于x + 36px时，会出现问题。在此示例中，容器为800px，内容小于836px。我对解决方案的想法是检查内容的高度并将其与容器的高度进行比较，如果差异小于36px，则不要添加棒类。

Answer 5

非常简单，只需为特定粘性div添加以下样式。

sticky {position：fixed;}