Já jsem pracoval na budování lepkavý chování postranního panelu, který bude spuštěn po boku vertikální krmiv, který je velmi podobný facebook krmiva na stolním webu. position: stickyfunguje dobře pro snadnou případu užití, kde je postranní panel je kratší než je výška výřezu. Nicméně, pokud vaše sidebar je větší než výřezu potřeby sidebar mít nějaký mechanismus posouvání, takže můžete vidět na spodní části postranního panelu, jak si posunout dolů krmivo.
Snažím se znovu Facebook sidebar lepkavá scroll zde.
Nejlepší způsob, jak pochopit požadované chování je vyzkoušet svůj facebook krmiva a zmenšit svou výšku obrazovky tak, aby vaše výřez je menší, než je výška v boční liště. Pokusím se zde shrnout:
Když výsek je vyšší než na postranním panelu (jednoduchý případ)
- Postranní panel se chová přesně tak, jak byste očekávali s pozicí: lepkavé. Postranní panel zůstává ve stejném místě a sleduje, jak si posunout dolů a nahoru.
Když vaše výřez je menší než postranním panelu
- Při posouvání dolů zpočátku sidebar svitky s krmivem (oni vypadají pevně dohromady)
- Když se dostanete do spodní části postranního panelu je pak zamkne na dně a při posouvání dolů více postranní panel se nyní zobrazí lepkavou dně pevným
- Když se nyní svitek zálohovat, postranní panel opět objeví připojena k hlavnímu zdroji, a posouvá se s hlavním krmivem. Jakmile narazí na horní část postranního panelu je pak lepkavé s horní pevnou.
- Takže mezi těmito dvěma stavy (horní pevný při rolování nahoru, dole pevně při posouvání dolů) se sidebar svitky v souzvuku s hlavním krmivem.
Je to velmi příjemné scrolling zkušenost, ale velmi obtížné obnovit.
Jsem dokázal ze států uvedených v krocích 1-3 nad uplatněním pozice lepkavými s toppolohy a při posouvání dolů pomocí posuvníku události a několik výřezů / výška výpočty sidebar určení rozdílu výšky a nastavení tophodnoty css tak nezapadne když dno je lemována s obrazovky (v podstatě initialTop - (sidebarHeight - viewportHeight), nemůžu přijít na kroky 4 a 5. to nejlepší, co mohl udělat, bylo přechod mezi těmito dvěma tophodnotami v závislosti na směru, posunovací, ale je to velmi špatné UX.
Mám karantény příklad rozvržení zde: https://codesandbox.io/s/fragrant-microservice-89b7z?fontsize=14&hidenavigation=1&theme=dark
K dispozici je základní dispozicí 2 sloupcích (levý postranní a hlavní krmiv). A je tu reagovat složka s názvem StickyScroll, který obtéká kolem sloupu a má všechny logiku aktualizovat tophodnotu. To může být úplně špatně start do dobré řešení, ale každá pomoc je velmi ceněn.
