Ustaw pozycję na stałe, ale postępuj zgodnie ze wskazówkami na stronie, jeśli treść jest zbyt duża.

Question

Zobacz this webpage.

1. Najpierw spróbuj przewinąć, widzisz, że lewy pasek pozostaje stały.
2. Zmień rozmiar okna, aby nie była widoczna cała zawartość lewego paska. Teraz przewiń. Tym razem lewy pasek nie jest naprawiony.

Na tej stronie znajduje się jquery, które oblicza wysokość lewego paska, porównuje go do wysokości okna, a następnie powoduje, że pozycja lewego słupka jest stała lub bezwzględna.

Zastanawiam się jednak, czy coś podobnego można uzyskać za pomocą samego HTML i CSS, nie używając jQuery lub podobnego.

Wszelkie sugestie? W skrócie, szukam paska z treścią, która pozostaje niezmienna, ale jest przewijana, jeśli zawartość się przepełni. Ale przewijanie powinno być razem z całą stroną.

Answer 1

Możesz używać zapytań o media do kierowania CSS w niektórych rozmiarach ekranu (i innych rzeczy), abyś mógł użyć jednego arkusza stylów, jeśli ekran jest za mały. Nie jestem ekspertem, więc nie ma przykładów, ale przyjrzyj się tutaj http://css-tricks.com/css-media-queries/. Przepraszam! ale domyślam się, że zorientowaliśmy się :)

Edit: Efektem pracy jest taka:

#leftnav { 
    /* default look */ 
    width: 300px; 
    position: fixed; 
    top:0; 
    height: 100%; 
} 

/* set the size at which the content is clipped and we cannot have fixed position */ 
@media all and (max-height: 500px) { 
    /* things inside here will only have an effect if the browser window shows 
     less than 500 px in the height, so here I apply the special rules */ 
    #leftnav { 
     position: absolute; 
     height: auto; 
     /* etc.. */ 
    } 
}