Przy przewijaniu strony tylko zawartość zielonego tła "content2" ma być ruchoma

pytanie zadane 4 grudnia 2017 w HTML i CSS przez Krzysiek_34 Mądrala (6,090 p.)
zamknięte 9 grudnia 2017 przez Krzysiek_34

Tak wygląda kod:
https://jsfiddle.net/Krzysiek_35/3d17dh13/

Chciałbym, aby tylko zawartość zielonego tła "content2" była ruchoma przy przewijaniu strony.
Reszta zawartości strony ma być nieruchoma (body, wrapper i content1).

Jestem pewny, że da się tak zrobić.

Czy do tego celu trzeba zastosować dodatkowo JavaScript?
Potraficie tak zrobić?

Będę bardzo wdzięczny za pomoc.

komentarz zamknięcia: Problem został rozwiązany.

3 odpowiedzi

odpowiedź 5 grudnia 2017 przez radek024 Szeryf (77,160 p.)

Przeanalizuj ten kod: https://codepen.io/radek024/pen/oGeYLw

Myślę że sprosta Twoim oczekiwaniom.

komentarz 5 grudnia 2017 przez Krzysiek_34 Mądrala (6,090 p.)

A potrafiłbyś to zrobić na podstawie mojego kodu na jsfiddle?

komentarz 5 grudnia 2017 przez radek024 Szeryf (77,160 p.)

Poprawa i praca czyjegoś kodu to z reguły nieprzyjemna sprawa. Możesz zbadać kod - w jaki sposób ja utworzyłem mój - i tym samym utworzyć własny szablon. Dużo się nauczysz ;)

komentarz 5 grudnia 2017 przez Krzysiek_34 Mądrala (6,090 p.)

Ten kod na codepenie jest nieprzydatny, bo nie przynosi żadnego efektu do mojego tematu.

komentarz 5 grudnia 2017 przez radek024 Szeryf (77,160 p.)

Menu oraz lewy panel są nieruchome, nastomiast ten po prawej - tak. Stopkę zawsze można wywalić. Jeżeli nie do tego dążysz, to nie za bardzo rozumiem treści tematu :P

odpowiedź 5 grudnia 2017 przez Mikołaj Kawczynski Dyskutant (9,160 p.)

position fixed

komentarz 5 grudnia 2017 przez Krzysiek_34 Mądrala (6,090 p.)

Tyle to i ja wiem.

komentarz 5 grudnia 2017 przez Mikołaj Kawczynski Dyskutant (9,160 p.)

Skoro wiesz to po co pytasz?

odpowiedź 5 grudnia 2017 przez pablop76 VIP (123,180 p.)

Jeżeli chodzi Ci o przewijanie zawartości wewnątrz diva to dajesz height na sztywno i dodajesz overflow-y: auto; I to wszystko.

komentarz 5 grudnia 2017 przez Krzysiek_34 Mądrala (6,090 p.)

Height na sztywno? Co to oznacza?

body
{
	height: 495vh;
}

#content1
{
	height: 2925px;
	overflow-y: auto;
}

#content2
{
	height: 2925px;	
	overflow-y: auto;
}

Tyle wynoszą wysokości w poszczególnych elementach strony. Wysokość jednego i drugiego contenta ma wynosić 2925px. Do jednego i drugiego dodałem overflow-y: auto;, ale to nie przyniosło żadnego efektu. Dalej jest to samo.

komentarz 5 grudnia 2017 przez pablop76 VIP (123,180 p.)

<div class="container">
  <div class="content">
  <h3>Na sztywno oznacza użycie pixeli  a nie procentów         !!!</h3>
    Wysokość kontenera nie może być większa niż jego content,   bo scrol nie będzie potrzebny i się nie pojawi (overflow-y: auto;)
  </div>
</div>

body {
  background-color: #000;
  font-size: 22px;
}

.container {
  margin: 0 auto;
  width: 200px;
  height: 300px;
  padding: 15px;
  background-color: #fff;
  overflow-y: auto;
}

.content {
  color: green;
}