将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时,脚本将再次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.