Mam aplikację jak poniżej (.NET Core + jQuery + Bootstrap). Po lewej stronie od zaznaczonego elementu wyświetla się dosyć długa lista modemów do wyboru w formie tabelki. Chciałbym uzyskać efekt, gdzie mogę scrollować tą listę, ale pole szukaj, pole komunikatów błędów oraz zaznaczony fragment pozostają w miejscu. Podpowiedzcie proszę w jaki sposób uzyskać taki efekt, żeby to jednocześnie pozostawało responsywne i działało na telefonach?
Poczytaj o position: sticky;
(https://elad.medium.com/css-position-sticky-how-it-really-works-54cd01dc2d46)
Ok, podoba mi się, ale jak to ugryźć jeżeli mam strukturę jak poniżej i chcę żeby divy A, B oraz D stały w miejscu, a przesuwał się tylko C?
<div class="container body-container">
<div class="row sticky-top-50">
<div id="A" class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 order-first">
</div>
<div id="B" class="col-lg-6 col-xl-6">
</div>
</div>
<div class="row sticky-top-80">
<div id="C" class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 order-first">
</div>
<div id="D" class="col-lg-6 col-xl-6 sticky-top-80">
</div>
</div>
</div>
Ogólnie to zamysł position: sticky
jest taki, że żaden wczesniejezy element w drzewie DOM nie może być relative / absolute / sticky / fixed
, oraz wysokość rodzica (element wyżej niż div z #c) powinna być większa od jego dziecka (czyli nasz div #c).
Nie wiem, czy rozumiesz moją "definicje" :D
baroo napisał(a):
Ok, podoba mi się, ale jak to ugryźć jeżeli mam strukturę jak poniżej i chcę żeby divy A, B oraz D stały w miejscu, a przesuwał się tylko C?
<div style="display: flex">
<div style="height: 1000px">
Tekst na 1000 pikseli wysokości
</div>
<div>
Tutaj wysokość będzie taka sama przez flexboxa
<div id="c" style="position: sticky; top: 25px;">
Sticky div :)
</div>
</div>
</div>
Wszystkie nieruchome treści wkładasz do lewej kolumny, a rzeczy, które mają być sticky do prawej.
edit:
Nie wiem z której wersji Bootstrapa korzystasz, ale w wersji 4, o ile się nie mylę to wszystkie klasy col-x
i pochodne były standardowo oznaczone jako position: relative
, więc trzeba zmienić je na position: static
, żeby wszystko nam działało.