Div fixed to a certain point on the page

Question

I’m developing a website where I have a fixed div, but when I get to a certain point, it accompanies the scroll. An example is the site https://rockcontent.com/

From what I saw, it is a script that from a certain point makes a scrolling calculation inversely proportional to the top of the div.

How do I do that?

I’m trying with a script kind of like this:

<script type="text/javascript">
$(window).scroll(function() {
  if ($(document).scrollTop() <= $("#mudar").position().top) {
$('.cta').css({'position':'fixed'});
// $('.cta').css({'left':'75%'});
// $('.cta').css({'top':'50%'});
  }
  else {

 // $('.cta').css({'left':'75%'});
 // $('.cta').css({'top':'50%'});
//      x=0;
 $(document).ready(function(){
   $("div").scroll(function() {
 x+=1;
  });
 });
  $('.cta').css({'top':'-(x)'});
}

 if ($(document).scrollTop() <= $("#ocultar").position().top) {
$('.cta').fadeOut();
  }
  else {
 $('.cta').fadeIn();
  }

});
</script>

Answer 1

This is the right way. What is missing is to re-apply the static positioning when the distance to the top is small again, so that it is positioned normally. This would be applied in your first else.

For the purpose of staying fixed without Fades, as it is in the example, nor need most of the code that has.

Take the example:

$(window).scroll(function() {
  if ($(document).scrollTop() > 210) { //ponto de mudança - 210 pixeis
    $('.cta').css({
      'position': 'fixed', //fixo a partir deste ponto
      'top': '100px',
      'right': '28px'
    });

  } else {
    $('.cta').css({ 'position': 'static' }); //se voltou a cima põe estatico
  }
});

#d1 {
  background-color: #1bb7d0;
  padding: 40px;
}

#d2 {
  padding: 20px;
  background-color: #d0d0d0;
  height: 600px;
}

#cont {
  width: 200px;
  float:left;
}

.cta {
  background-color: #ff5722;
  float: right;
  width: 150px;
  margin-right:35px;
  padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus eu justo vel dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum tincidunt pharetra elit eget pretium. Aenean interdum, mauris eu efficitur feugiat, ex
  tortor tincidunt nisl, nec dictum metus odio vel urna. Integer volutpat elit ante, ac volutpat nulla hendrerit ac. In accumsan nisl eget elementum vulputate. Pellentesque volutpat molestie massa, nec facilisis elit rhoncus quis. Sed magna purus, viverra
  et scelerisque ut, malesuada dignissim ante. Pellentesque nulla quam, malesuada at eros ac, tincidunt aliquam eros. Quisque in nisl in ipsum cursus tempus. Sed sodales ligula quis eros hendrerit, id gravida nulla tristique. Duis molestie pellentesque
  risus euismod congue.
</div>
<div id="d2">
  <div id="cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus eu justo vel dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum tincidunt pharetra elit eget pretium. Aenean interdum, mauris eu efficitur feugiat,
    ex tortor tincidunt nisl, nec dictum metus odio vel urna. Integer volutpat elit ante, ac volutpat nulla hendrerit ac.</div>
  <div class="cta">Div com <br>texto fixo<br> que desce</div>
</div>

I chose to stylize a little to be more like the example you mentioned.

Edit:

If you need it to be fixed at the bottom too, you need to make it a little more complicated as the div has to remain fixed but vary the height from the end. If it stopped being fixed it would go back to the top part, where it was placed in html.

Example:

const alturaCta = $(".cta").height(); //capturar a altura do div fixo

$(window).scroll(function() {
  if ($(document).scrollTop() > 210) { //ponto de mudança - 210 pixeis
    let novoTop = '100px'; //começa com 100px que é o normal
    
    if ($(document).scrollTop() > 1500){ //ponto de mudança do fim
      novoTop = (1500 + 100 - (alturaCta + $(document).scrollTop())) + "px";
      //                  ^----------- altura top que tem normalmente
    }
    
    $('.cta').css({
      'position': 'fixed', //fixo a partir deste ponto
      'top': novoTop, //agora novoTop
      'right': '28px'
    });

  } else {
    $('.cta').css({ 'position': 'static' }); //se voltou a cima põe estatico
  }
});

#d1 {
  background-color: #1bb7d0;
  padding: 40px;
}

#d2 {
  padding: 20px;
  background-color: #d0d0d0;
  height: 600px;
}

#d3 {
  background-color: #9e9e9e;
  height: 1500px;
}

#cont {
  width: 200px;
  float:left;
}

.cta {
  background-color: #ff5722;
  float: right;
  width: 150px;
  margin-right:35px;
  padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus eu justo vel dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum tincidunt pharetra elit eget pretium. Aenean interdum, mauris eu efficitur feugiat, ex
  tortor tincidunt nisl, nec dictum metus odio vel urna. Integer volutpat elit ante, ac volutpat nulla hendrerit ac. In accumsan nisl eget elementum vulputate. Pellentesque volutpat molestie massa, nec facilisis elit rhoncus quis. Sed magna purus, viverra
  et scelerisque ut, malesuada dignissim ante. Pellentesque nulla quam, malesuada at eros ac, tincidunt aliquam eros. Quisque in nisl in ipsum cursus tempus. Sed sodales ligula quis eros hendrerit, id gravida nulla tristique. Duis molestie pellentesque
  risus euismod congue.
</div>
<div id="d2">
  <div id="cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus eu justo vel dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum tincidunt pharetra elit eget pretium. Aenean interdum, mauris eu efficitur feugiat,
    ex tortor tincidunt nisl, nec dictum metus odio vel urna. Integer volutpat elit ante, ac volutpat nulla hendrerit ac.</div>
  <div class="cta">Div com <br>texto fixo<br> que desce</div>
</div>
<div id="d3"></div>

You can even improve the example by applying variables or constants to all values that define change points. I didn’t do it to make it clearer to you.