Jak poprawić fixed sidebar

Question

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

Answer 1

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.

Answer 2

Dałeś position: fixed to on będzie ci pod baner wchodził.

 

body
{
  margin: 0;
  
}

Będzie lepiej wyglądąło.

Answer 3

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?

Answer 4

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

Comments

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 ;/

---

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.