Изменить положение сверху/слева от детей независимо от родительского прокрутки. Позиция точки

Question

У меня есть несколько div, расположенных абсолютно внутри его родителя. Родитель переполняет экран и может быть прокручен.

При щелчке эти разделители должны располагаться на высоте экрана (как если бы они фиксировали положение). Таким образом, каждому div присваивается определенная ширина и высота и верхнее значение. Проблема в том, что это работает только так, как ожидается, если родительский элемент не прокручивается (scrollTop = 0).

Я хочу, чтобы это было сделано плавно с переходами CSS. Я могу назначить верхнее значение, относящееся к позиции прокрутки родителя в момент щелчка. Но Я ищу способ CSS для этого. Я думал об изменении положения, зафиксированного в div, но это не переход.

Есть ли способ заставить его работать используя CSS?

Редактировать: Я спрашиваю, есть ли у кого-нибудь предложение о том, как достичь этого, используя CSS, или подумали о том, как подойти к нему по-другому.

Edit2: Это GIF включает в себя только изменение положения (ширина или высота не меняется), как она есть, где я имею вопрос. Это и есть искомое решение:

JSFiddle.

var $container = $('#container'); 
 
var $elements = $container.find('.element'); 
 
$container 
 

 
    .height(function() { 
 

 
    return ($elements.eq(-1).position().top - $elements.eq(0).position().top + $elements.eq(0).outerHeight()); 
 

 
    }) 
 
    .on('click', function() { 
 

 
    $elements.add($container).toggleClass('on'); 
 

 
    });

#container { 
 
    width: 100%; 
 
    background: grey; 
 
    position: absolute; 
 
} 
 

 
.element { 
 
    border: 1px solid black; 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: white; 
 
    left: 100px; 
 
    transition: all 1s ease; 
 
} 
 

 
.element:nth-child(2) { 
 
    top: 130px; 
 
} 
 

 
.element:nth-child(3) { 
 
    top: 340px; 
 
} 
 

 
.element:nth-child(4) { 
 
    top: 550px; 
 
} 
 

 
.element:nth-child(5) { 
 
    top: 660px; 
 
} 
 

 
.on.element { 
 
    left: 0; 
 
    height: 20vh; 
 
    width: 20vh; 
 
} 
 

 
.on.element:nth-child(2) { 
 
    top: 20vh; 
 
} 
 

 
.on.element:nth-child(3) { 
 
    top: 40vh; 
 
} 
 

 
.on.element:nth-child(4) { 
 
    top: 60vh; 
 
} 
 

 
.on.element:nth-child(5) { 
 
    top: 80vh; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="element"></div> 
 
    <div class="element"></div> 
 
    <div class="element"></div> 
 
    <div class="element"></div> 
 
    <div class="element"></div> 
 
</div>

Answer 1

Добавление Маржа-верхнее значение, эквивалентное scrollTop position и переход с такой же продолжительностью и легкостью как дети сделали трюк:

JSFiddle

var $container = $('#container'); 
 
var $elements = $container.find('.element'); 
 
$container 
 

 
    .height(function() { 
 

 
    return ($elements.eq(-1).position().top - $elements.eq(0).position().top + $elements.eq(0).outerHeight()); 
 

 
    }) 
 
    .on('click', function() { 
 

 
    $elements.add($container).toggleClass('on'); 
 
    $container.css('margin-top', $('body').scrollTop()); 
 

 
    });

#container { 
 
    width: 100%; 
 
    background: grey; 
 
    position: absolute; 
 
    transition: all 1s ease; 
 
} 
 

 
.element { 
 
    border: 1px solid black; 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: white; 
 
    left: 100px; 
 
    transition: all 1s ease; 
 
} 
 

 
.element:nth-child(2) { 
 
    top: 130px; 
 
} 
 

 
.element:nth-child(3) { 
 
    top: 340px; 
 
} 
 

 
.element:nth-child(4) { 
 
    top: 550px; 
 
} 
 

 
.element:nth-child(5) { 
 
    top: 660px; 
 
} 
 

 
.on.element { 
 
    left: 0; 
 
    height: 20vh; 
 
    width: 20vh; 
 
} 
 

 
.on.element:nth-child(2) { 
 
    top: 20vh; 
 
} 
 

 
.on.element:nth-child(3) { 
 
    top: 40vh; 
 
} 
 

 
.on.element:nth-child(4) { 
 
    top: 60vh; 
 
} 
 

 
.on.element:nth-child(5) { 
 
    top: 80vh; 
 
} 
 

 
.on.element:nth-child(6) { 
 
    top: 25vh; 
 
} 
 
body { 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="element"></div> 
 
    <div class="element"></div> 
 
    <div class="element"></div> 
 
    <div class="element"></div> 
 
    <div class="element"></div> 
 
</div>

Answer 2

Как вы уже упоминали изменения position не переходит. Это связано с тем, что position является неанимаемым свойством, т. Е. Анимации/переходы не работают для него, и поэтому меняется положение от absolute до relative или наоборот jumpy. Проверьте here на список анимационных свойств.

Вы также можете удалить position: absolute по телефону .element с самого начала.

В любом случае, вот что вы можете сделать:

1. При нажатии DIV, добавить класс on только на #container и изменять CSS с position: relative и top: 0 и удалить дополнительные правила для top позиций
2. Добавить отступы от scrollY по адресу #container, так что Div # 1 входит в текущий видовой экран, если страница прокручивается.

заказ приведенные ниже фидель:

Использование relative от начала: https://jsfiddle.net/4utdxr0t/2/

Переключение ч/б relative и position: https://jsfiddle.net/4utdxr0t/1/