• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

position: sticky css

Aruba Cloud - Virtual Private Server VPS
0 głosów
778 wizyt
pytanie zadane 7 maja 2020 w HTML i CSS przez poldeeek Mądrala (5,980 p.)

Napisałem aplikację, w której chcę aby navbar i lewe menu zawsze były przyklejone do góry i lewej części strony nawet podczas scrollowania. 

Przy użyciu position: fixed to działa jednak nawet przed zaczęciem scrollowania pozostałe elemnty nie oddziałują na navbar i menu.
Przy użyciu position: sticky nie widać żadnego efektu.

leftMenu.css

.UnloggedLeftMenu{
    height: calc(100vh - 70px);
    width: 70px;
    background-color: #6E81FB;
    padding: 20px 0 0 0;
    border-right: 2px solid #575353;
    box-sizing: border-box;
    position: sticky;        
}

navbar.css

.NavBar{
    padding: 0 15px 0 0px;
    background-color: #6E81FB;
    margin: 0px;
    box-sizing: border-box;
    height: 70px;
    text-align: left;
    display: flex;
    line-height: 70px;
    align-items: center;
    border-bottom: 2px solid #575353;
    position: sticky;        
}

Screeny:

 

1 odpowiedź

+1 głos
odpowiedź 7 maja 2020 przez radek024 Szeryf (77,160 p.)
wybrane 7 maja 2020 przez poldeeek
 
Najlepsza

Z position: fixed to powinno działać. Nie dodałeś własności top:0 oraz left:0, efektem czego nie osiągasz żądanego rezultatu.

komentarz 7 maja 2020 przez poldeeek Mądrala (5,980 p.)
Dodałem też padding w body 70px od lewej i góry, a LeftMenu top:70 px i działa jak powinno. Position: sticky również działa, tylko wtedy bez tego paddingu. Jeśli mogę zapytać którą metodę lepiej użyć w tym przypadku ? Czy nie ma to większego znaczenia ?
1
komentarz 7 maja 2020 przez radek024 Szeryf (77,160 p.)

O różnicach w position pisałem na blogu: https://radek024.github.io/blog/bykiwkodzie/strony-www/css/2018/08/03/position-w-css/

Generalnie do Twojego zastosowania będzie odpowiednim zastosowanie position: fixed. position: fixed przydaje się podczas stylizowania elementów, które mają osiągnąć dane miejsce (a następnie zachowywać się jak przy pierwszej właściwości) po zadanej wartości top, left, bottom bądź right.

Podobne pytania

0 głosów
1 odpowiedź 850 wizyt
0 głosów
1 odpowiedź 1,341 wizyt
pytanie zadane 16 maja 2019 w HTML i CSS przez Rozukee Początkujący (300 p.)
0 głosów
1 odpowiedź 371 wizyt
pytanie zadane 12 lipca 2017 w HTML i CSS przez Vorex444 Dyskutant (9,610 p.)

93,335 zapytań

142,331 odpowiedzi

322,415 komentarzy

62,670 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...