DIV TEXT fixed only in the space of the DIV FATHER

Question

DIV TEXT fixed only in the space of the DIV FATHER

Navigation

#1 by (1 votes)

6

Hello, I would like to do the following.

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

I have a DAD and inside it there are two div's side by side. The height of the div FORM depends on the amount of content that can vary. The height of the TEXT div is fixed. I want the div TEXT to be larger than the TEXT div, so the div TEXT is fixed scrolling next to the page but with a scrolling limit until the end of the FORM div.

Just like in the image if the div FORM is greater than the TEXT div and the page is rolled, the TEXT until you reach the end of the div FORM . It's like a navbar-fixed-top, but it will not scroll the whole site, but it will scroll until it is aligned with the FORM div, when aligning with the FORM

. If you scroll up again, the div TEXT will scroll until you reach the top of the div FORM . In short, always using FORM as a reference for the TEXT div that will only be fixed if the div FORM is larger. Remembering that I'm using bootstrap, I almost got it with the affix, but when it aligns with the base of the div FORM instead of getting static aligned the base, it goes back to its original position.

javascript html jquery css bootstrap

asked by anonymous 13.12.2016 / 08:04

1 answer

Consume WebService NFeDistribuicaoDFe - VB.NET or C # - Manifestation / Download NFe Problem with autocomplete jquery-ui via Ajax / PHP

score 1 · Answer 1

See if that's more or less what you thought.

$(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><divclass="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>