"Przyklejające się" divy


(sajmon17099) #1

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.


(djgrzenio) #2

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


(sajmon17099) #3

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


(mordesku) #4

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


(sajmon17099) #5

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


(mordesku) #6

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

 


(sajmon17099) #7

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


(mordesku) #8

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ć.


(sajmon17099) #9

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


(Fizyda) #10

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.


(sajmon17099) #11

Ź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.


(Fizyda) #12

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.