Как сделать настакивать групп списка?

Question

[Владимир Ткачев]

Здравствуйте, на самом деле даже не знаю как это правильно называется. Суть вот в чем: есть список, в списке есть группы и ты такой проматываешь группу допустим вверх и элемент который содержит в себе название группы прилипает к верху списка, ну или если ты пролистываешь вниз то группа прилипает к низу списка, и если групп много то они настакиваются вверху или внизу. Если можно, то напишите как хотя бы такая штуку правильно называется, что бы поискать решение или примеры. Спасибо!

Comments

[Модератор]

Дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац).
В противном случае, ваши вопросы будут удаляться по причине тег-спама, а систематические нарушения приведут к блокировке учетной записи.

[Froggyweb]

js drag & drop

Answer 1

[Роман Александрович]

Думаю ваша тема https://github.com/frontend-collective/react-sorta...
демо https://react-sortable-tree.surge.sh/

Comments

[Владимир Ткачев]

Спасибо за помощь, но это немного не то, библиотека интересная, взял ее на заметку)

[Роман Александрович]

Владимир Ткачев, чем она вам не подходит?

[Владимир Ткачев]

Роман Александрович, на самом деле я не могу утверждать, что она не подходит, но то что я вижу выглядит так, как будто не подходит. Нужно что был список который можно скроллить, в списке могут быть группы и это группы должны стакаться вверху или внизу этого списка. Как реализовать такой список с помощью предложено Вами библиотеки я пока не знаю.

[Роман Александрович]

Владимир Ткачев, а может есть пример где вы уже такое видели?

[Владимир Ткачев]

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

[Роман Александрович]

Владимир Ткачев, думаю что за основу вам можно нагуглить js drag & drop но вот анимацию придется делать руками

[Роман Александрович]

Владимир Ткачев, как вариант вы можете при наведении мышкой на группу показывать sub menu а остальные сворачивать

[Владимир Ткачев]

Роман Александрович, думаю, что drug and drop тоже не совсем подходят для решения такой задачи, вот примерно, то что мне нужно, только в несколько упрощенном варианте, в этом примере используется еще position: sticky, которое не работает в ie 11, так что его пришлось отбросить в сторону
https://codepen.io/nabosh/pen/VMjmWP

[Роман Александрович]

Владимир Ткачев, jsfiddle.net/97mgV/1

[Владимир Ткачев]

Роман Александрович, вот еще упрощенный пример того что нужно, https://css-tricks.com/position-sticky-2/, опять таки с position: sticky

[Роман Александрович]

Владимир Ткачев, требуйте пример у дизайнеров или хотя бы пример анимации

Answer 2

[forspamonly2]

это position: sticky в чистом виде. просто закрепите каждый заголовок на своём месте сверху и снизу.

вот, на базе одного из упомянутых вами примеров: https://codepen.io/bsl-zcs/pen/ZVypPb

если нужно для старых браузеров - цепляйте какой-нибудь полифилл.