"Przyklejające się" divy

Witam. Jak mogę zrobić przyklejające się divy, najlepiej za pomocą czystego CSS/HTML? W tym przypadku mógłbym chyba poużywać trochę JavaScriptu (ale w ogóle nie wiem jak) bo zbytnio chyba z tego co widziałem CSSem się nie da. Wiem że istnieje takie coś jak postition: sticky ale niezbyt dobrze to działa.

Rozumiem coś jak menu, które trzyma się u góry ?

JS Obliiczasz wysokość okna, weź scrolla jakoś takoś i zmieniasz potem diva na position abostule.

Albo jakiś ogotiwec :) http://stickyjs.com

Tylko nie znam JavaScriptu, nie wiem nawet jak użyć gotowca…

W takiej sytuacji polecam zlecić to komuś kto to potrafi.

Ale chcę to zrobić sam i trochę się poduczyć JavaScriptu. Albo chociaż wiedzieć jak wstawiać jakiegoś gotowca na stronę.

oczekujesz że ktoś w odpowiedzi na twoje pytanie napiszę kurs html/js?

 

No nie, ale np. powie czego użyć i jak to umieścić.

czego użyć to było już napisane, jeśli chodzi o wklejanie gotowców to najlepiej ctrl+c w źródle i ctrl+v tam gdzie chcesz wkleić.

Spróbuję, może zadziała.

Wystarczy uzyć

position: fixed;

to przyklei Ci element tak że nie będzie znikał wraz ze scrollowaniem strony. W zależności od potrzeb może zajść potrzeba ustawienia stałej szerokości lub z-index by element nie był przysłaniany przez inne elementy strony.

Źle mnie zrozumiałeś. Raczej chodzi mi o to, żeby div po scrollowaniu przyklejał się do góry strony i miał position: fixed.

Czyli np. jest div gdzieś na środku strony, odstęp od góry to np. 40vh, zachowuje się jakby miał ustawione position: absolute albo relative i scrolluje się razem ze stroną, jednak gdy po przescrollowaniu jego górny bok zetknie się z górą okienka przeglądarki to wtedy div ma position: fixed i zostaje w miejscu, na samej górze.

W takim razie do mojego rozwiązania trzeba dodać mały kod JS który wykryje scrollowanie strony i w momencie gdy ten div będzie powyżej krawędzi ekranu dodajesz mu klasę z position fixed. Jeśli nie chcesz tego pisać sam, to możesz użyć boostrapa bo taki efekt w nim jest dostępny.