javascript - 将 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 添加另一个 child :

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

它有效..

你可以在这里看到工作 fiddle :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>

(不同之处在于第一个 fiddle 的 child 少了一个 child 类)。

感谢任何帮助!

Answer 1

发生这种情况的原因是，一旦您将 position: fixed 赋予您的 #sticky 元素，它就会将其从文档流中移除。这意味着您的所有 div.child 元素都向上移动，这使得容器元素的高度变小。因为容器元素高度变小，容器元素不再需要滚动，也就是它的滚动条消失，它的滚动位置重置为0。当它的滚动位置重置为0时，脚本再次移除stick class 从你的 #sticky 元素，我们回到了我们开始的地方，但是容器元素一直滚动到顶部。

总结:

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

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

3. 脚本再次触发，从 #sticky 中移除 .stick 类，并且容器的 scrollTop 保持为 0(因此容器 div 向上滚动到顶部)。

下面是对#sticky元素使用position: absolute的解决方案，当#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。