6

Olá, gostaria fazer o seguinte.

<div class="pai">
  <div class="form"></div>
  <div class="text"></div>
</div>

Tenho uma div PAI e dentro dela existe duas div's uma do lado da outra. O height da div FORM depende da quantidade de conteúdo que pode variar. O height da div TEXT é fixo.
Quero que quando a div FORM for maior que a div TEXT, a div TEXT fique fixed rolando junto a página, mas com um limite de rolagem até o fim da div FORM.

inserir a descrição da imagem aqui

Assim como na imagem se a div FORM for maior que a div TEXT e a página for rolada, a div TEXT irá rolar junto até atingir o fim da div FORM. É como se fosse um navbar-fixed-top, porém não irá rolar o site todo, mas irá rolar até estar alinhado com a div FORM, ao alinhar com a div FORM.
Se for rolado para cima de novo, a div TEXT irá rolar até atingir o topo da div FORM.
Resumindo, sempre usando FORM como referência para a div TEXT que só vai ser fixed caso a div FORM seja maior.
Lembrando que estou usando bootstrap, eu quase consegui com o affix, mas quando ele alinha com a base da div FORM ao invés de ficar estático alinhado a base, ele volta a sua posição original.

1 Resposta 1

1

Veja se é isso mais ou menos que você pensou.

$(document).ready(function() {
  var hForm = $('.form');
  var hText = $('.text');
  var lText = $('.text').offset().left;
  var tText = $('.text').position().top;
  console.log(tText);

  $(window).on('scroll', function() {
    var scroll = $(this).scrollTop();

    if (scroll >= hForm) scroll = hForm;
    else if (scroll <= tText) scroll = tText;

    if (hForm.height() > hText.height()) {
      hText.css({
        'top': scroll
      });
    }
  });
});
.pai {
  border: 1px solid black;
  margin: auto;
  width: 500px;
  display: table;
  position: relative;
}
.form {
  width: 50%;
  float: left;
  vertical-align: top;
  background-color: #FFF;
}
.text {
  width: 50%;
  float: right;
  vertical-align: top;
  background-color: #555;
  top: 0;
  position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pai">
  <div class="form">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum non rem praesentium nesciunt voluptatum aspernatur repudiandae dolor dolores pariatur, numquam laudantium impedit molestiae minus fuga libero veniam, dicta fugiat exercitationem. Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Explicabo optio enim magni reprehenderit, ipsam quas, in libero accusamus voluptatum porro eveniet omnis mollitia veniam. Saepe optio vero debitis totam corrupti. Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Fuga, iure, aliquid. Eius molestias numquam totam culpa, eum distinctio deserunt quibusdam quo? Ex, rem, iste. Omnis molestias nostrum laudantium voluptatum hic!
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed nulla suscipit consectetur sunt, eius ad, dolores eaque, ipsam qui dolorum id omnis voluptatum eligendi numquam provident magni nisi, praesentium maiores.</div>
    <div>Earum iure repudiandae nisi voluptas ipsa minima cupiditate unde, esse repellendus. Distinctio error non ad quas inventore, et optio obcaecati molestias rerum omnis impedit, libero a odit! Dicta, ipsum accusantium.</div>
    <div>Fugiat facilis, quam debitis error animi rem alias, beatae quibusdam ea quaerat neque mollitia. Eligendi consequuntur ut ipsam esse maxime laudantium eos dolorem magni consectetur quisquam magnam, delectus aliquam doloribus.</div>
    <div>Tempore perspiciatis molestias omnis quia sed nulla ut possimus illo facilis repellendus veritatis ex voluptate eveniet beatae, sequi incidunt nemo. Nesciunt, non, fugit. Mollitia dolores, ab ipsa sequi eum tempore?</div>
  </div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut harum facilis eius quaerat maxime. Quibusdam ut autem dolorem, ullam ad nam, deserunt nesciunt molestias eius, unde magni. Non quas, eveniet.</div>
</div>

1
  • Quase, porém a div TEXT está absoluta, então se tem mais conteudo abaixo da div PAI, a div TEXT continua descendo. Eu quero que mesmo que tenha mais conteúdo abaixo da div PAI, a div TEXT pare de dar scroll assim que ela ela atingir o fim da div PAI. E se o usuário dar scroll para o top a div TEXT de scroll até atingir o topo da div PAI. Qualquer dúvida só chamar. Commented 23/12/2016 às 15:32

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 .