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

Jak poprawić fixed sidebar

VPS Starter Arubacloud
+2 głosów
215 wizyt
pytanie zadane 6 lipca 2015 w HTML i CSS przez Agentok Użytkownik (660 p.)
http://codepen.io/anon/pen/mJxryE - jak poprawić żeby nie było takiego odskoku jak się przewija ekran do góry to sidebar wjeżdża na header. Jeszcze jest chyba problem jak dokument jest za mały to się psuje ale nie wiem jak to sprawdzić.

4 odpowiedzi

0 głosów
odpowiedź 6 lipca 2015 przez tarnasm Gaduła (3,030 p.)

Jest na Fixed więc będzie jakby nad wszystkimi divami. Proponuję Ci ustaić margin-top: -10px; dla klasy .fixed-header.  Wówczas zludzenie wjechania na header zniknie. To moja sugestia aczkolwiek myślę, że powinien się wypowiedzieć jakiś spec.

0 głosów
odpowiedź 6 lipca 2015 przez Eimens Maniak (69,240 p.)
Dałeś position: fixed to on będzie ci pod baner wchodził.

 

body
{
  margin: 0;
  
}

Będzie lepiej wyglądąło.
0 głosów
odpowiedź 6 lipca 2015 przez Agentok Użytkownik (660 p.)
http://i58.tinypic.com/10glgjm.png - nie działa niestety nadal jak przewijam do góry to sidebar naskakuje a jak zrobić aby zachowywał się jak w pozycji relatywnej?
0 głosów
odpowiedź 6 lipca 2015 przez Czort Nałogowiec (32,500 p.)
.wrapper{
margin-top:80px;
}

Trochę doraźne rozwiązanie ale u mnie na ekranie nie ma efektu przeskoku/wjeżdżania pod header. Nie pytaj skąd wziąłem 80px. 

Ogólnie to temu układowi sporo brakuje, na przykład przy scrollowaniu w dół content ucieka poza ekran.

komentarz 6 lipca 2015 przez Agentok Użytkownik (660 p.)
Właśnie chce aby przy scrollowaniu w dół sidebar był fixed i logo a jak scrolluje do góry aby sidebar zatrzymywał się na pierwotnej pozycji a mi nadal najeżdża na tło headera i jest problem ;/
komentarz 6 lipca 2015 przez Czort Nałogowiec (32,500 p.)

Ok udało się jakoś rozwiązać. Problem nie był w css tylko w jquery:)

http://codepen.io/anon/pen/YXapEL

if ($(document).scrollTop() > 420) {
      $('.left').addClass('fixed-left');
    }else {$('.left').removeClass('fixed-left');}

To zostało zmienione w oryginalnym kodzie. 

Podobne pytania

0 głosów
2 odpowiedzi 249 wizyt
pytanie zadane 26 maja 2017 w HTML i CSS przez Mateusz Arabczyk Początkujący (450 p.)
0 głosów
1 odpowiedź 209 wizyt
pytanie zadane 2 lutego 2021 w HTML i CSS przez Mlorism Użytkownik (580 p.)
0 głosów
1 odpowiedź 174 wizyt
pytanie zadane 14 września 2019 w HTML i CSS przez Jakub Chomicz 1 Użytkownik (840 p.)

92,454 zapytań

141,262 odpowiedzi

319,099 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...