0

Eu tenho a seguinte página:

<style>
.wrapper {
  display: flex;
}

.wrapper .esq, .wrapper .dir {
  width: 50%;
}
</style>

<div class="wrapper">
  <div class="esq">
      <h1>
        Meu Título
      </h1>
  </div>

  <div class="dir">
    <p>
        O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.
    </p>
    
    <p>
    Ao contrário da crença popular, o Lorem Ipsum não é simplesmente texto aleatório. Tem raízes numa peça de literatura clássica em Latim, de 45 AC, tornando-o com mais de 2000 anos. Richard McClintock, um professor de Latim no Colégio Hampden-Sydney, na Virgínia, procurou uma das palavras em Latim mais obscuras (consectetur) numa passagem Lorem Ipsum, e atravessando as cidades do mundo na literatura clássica, descobriu a sua origem. Lorem Ipsum vem das secções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" (Os Extremos do Bem e do Mal), por Cícero, escrito a 45AC. Este livro é um tratado na teoria da ética, muito popular durante a Renascença. A primeira linha de Lorem Ipsum, "Lorem ipsum dolor sit amet..." aparece de uma linha na secção 1.10.32.
    </p>
    
    <p>
    O pedaço mais habitual do Lorem Ipsum usado desde os anos 1500 é reproduzido abaixo para os interessados. As secções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" do Cícero também estão reproduzidos na sua forma original, acompanhados pela sua tradução em Inglês, versões da tradução de 1914 por H. Rackham.
    </p>
  </div>
</div>

Eu preciso que ao rolar a página para o usuário ler o conteúdo da div ".dir", o conteúdo da div ".esq" fique fixo, porém sem ficar por cima de outras seções posteriores do site. Alguém saberia como fazer isso da melhor forma?

1 Resposta 1

1

Se entendi direito a pergunta, você quer que enquanto rola o conteúdo da direita o texto da esquerda se mantenha fixo sem afetar o conteúdo posterior. Se for isso basta inserir no elemento h1 a propriedade position com o valor sticky para que este elemento permaneça alinhado com o conteúdo a direita juntamente com a propriedade top e o valor que deseja que o elemento fique posicionado em relação ao topo:

.wrapper {
  display: flex;
}

.wrapper .esq,
.wrapper .dir {
  width: 50%;
}

h1 {
  position: sticky;
  top: 0
}
<div class="wrapper">
  <div class="esq">
    <h1>
      Meu Título 1
    </h1>
  </div>

  <div class="dir">
    <p>
      O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto
      não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente
      com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.
    </p>

    <p>
      Ao contrário da crença popular, o Lorem Ipsum não é simplesmente texto aleatório. Tem raízes numa peça de literatura clássica em Latim, de 45 AC, tornando-o com mais de 2000 anos. Richard McClintock, um professor de Latim no Colégio Hampden-Sydney, na
      Virgínia, procurou uma das palavras em Latim mais obscuras (consectetur) numa passagem Lorem Ipsum, e atravessando as cidades do mundo na literatura clássica, descobriu a sua origem. Lorem Ipsum vem das secções 1.10.32 e 1.10.33 do "de Finibus Bonorum
      et Malorum" (Os Extremos do Bem e do Mal), por Cícero, escrito a 45AC. Este livro é um tratado na teoria da ética, muito popular durante a Renascença. A primeira linha de Lorem Ipsum, "Lorem ipsum dolor sit amet..." aparece de uma linha na secção
      1.10.32.
    </p>

    <p>
      O pedaço mais habitual do Lorem Ipsum usado desde os anos 1500 é reproduzido abaixo para os interessados. As secções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" do Cícero também estão reproduzidos na sua forma original, acompanhados pela sua
      tradução em Inglês, versões da tradução de 1914 por H. Rackham.
    </p>
  </div>
</div>

<div class="wrapper">
  <div class="esq">
    <h1>
      Meu Título 2
    </h1>
  </div>

  <div class="dir">
    <p>
      O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto
      não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente
      com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.
    </p>

    <p>
      Ao contrário da crença popular, o Lorem Ipsum não é simplesmente texto aleatório. Tem raízes numa peça de literatura clássica em Latim, de 45 AC, tornando-o com mais de 2000 anos. Richard McClintock, um professor de Latim no Colégio Hampden-Sydney, na
      Virgínia, procurou uma das palavras em Latim mais obscuras (consectetur) numa passagem Lorem Ipsum, e atravessando as cidades do mundo na literatura clássica, descobriu a sua origem. Lorem Ipsum vem das secções 1.10.32 e 1.10.33 do "de Finibus Bonorum
      et Malorum" (Os Extremos do Bem e do Mal), por Cícero, escrito a 45AC. Este livro é um tratado na teoria da ética, muito popular durante a Renascença. A primeira linha de Lorem Ipsum, "Lorem ipsum dolor sit amet..." aparece de uma linha na secção
      1.10.32.
    </p>

    <p>
      O pedaço mais habitual do Lorem Ipsum usado desde os anos 1500 é reproduzido abaixo para os interessados. As secções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" do Cícero também estão reproduzidos na sua forma original, acompanhados pela sua
      tradução em Inglês, versões da tradução de 1914 por H. Rackham.
    </p>
  </div>
</div>

OBS: Não sei qual seria o conteúdo que viria posteriormente ao descrito na pergunta, então só repeti o mesmo conteúdo para elaboração e visualização do exemplo.

1
  • 1
    Funcionou perfeitamente! Muito obrigado. :) Commented 18/11/2022 às 14:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .