单击时，将 div 元素动画到顶部并使其具有粘性

Question

我有一个父 div，其中包含多个子 div，在单击任何子元素时，我试图根据其当前父元素将该子元素从其当前位置动画到顶部位置，然后移动到顶部具有适当的动画，我希望该子元素具有粘性，以便其他子元素可以轻松地在其下方滚动，然后，如果单击任何其他子元素，它将动画到顶部并且最近的子元素将移回它的旧位置。

任何使用 Angular 和/或 html 和 css 的帮助都会非常感激。 我还为我的初始代码附加了 stackblitz 角度项目链接。

https://stackblitz.com/edit/angular-ivy-abbnjo

谢谢

Answer 1

我觉得这个问题很有趣，所以我做了一个快速示例，说明如何通过 jQuery 做到这一点。那里肯定有一些库可能已经这样做了，但是为了分享它背后的逻辑，这里有一个 JSFiddle 中的快速演示。不过，它可能需要更多的爱。

我希望这会有所帮助！

JSFiddle 链接：https://jsfiddle.net/qo6x42za/1/

HTML

<div>
  <div class="sticky"></div>
  <div class="container">
    <div class="box" data-order="1">Box1</div>
    <div class="box" data-order="2">Box2</div>
    <div class="box" data-order="3">Box3</div>
    <div class="box" data-order="4">Box4</div>
    <div class="box" data-order="5">Box5</div>
  </div>
</div>

CSS

.container {
  position: relative;
  height: 250px;
  overflow-y: scroll;
  border: 1px solid #000;
}

.box {
  width: 100px;
  height: 50px;
  padding: 20px;
  background-color: #595959;
  color: #fff;
  border: 1px solid #c90000;
}

Javascript

$('.box').each(function(index) {
    $(this).on('click', function() {
        const target = $(this);
        const sticky = $('.sticky');
        const container = $('.container');
        const position = $(sticky).position();

        // after animation completes
        const options = {
            complete: () => {

                // detach previous item from sticky container and place back to original position
                if ($(sticky).children().length > 0) {
                    const firstChild = $(sticky).children().first();
                    const order = $(firstChild).data('order');
                            const previousChild = order - 1;

                    if (order > 1) {
                        $(firstChild).detach().insertAfter($(`[data-order=${previousChild}]`));
                    } else {
                        $(firstChild).detach();
                        $(container).prepend($(firstChild));
                    }
                }

                // attach item to sticky container
                $(sticky).append($(target));
                // remove the style attribute as we no longer need it
                $(target).removeAttr('style');
            }
        };

        // animate to position
        $(target).css({ position: 'absolute'});
        $(target).animate({
            top: position.top
        }, options);

    });
})