Div fixed to some extent of the page

Question

Div fixed to some extent of the page

Navigation

#1 by (2 votes)

1

I'm developing a website that has a fixed div, but when it reaches a certain point, it follows the scroll. An example is the site link

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 this?

I'm trying with a script something 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>

html jquery css rolamento

asked by anonymous 19.10.2017 / 22:14

1 answer

In the ActiveRecord is it mandatory to use belongs_to? How to change StatusBar color

score 2 · Answer 1

This is the correct path. What is lacking 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 to your first else .

For the purpose of getting fixed with fades , as in the example, you do not even need most of the code you have.

See 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><divid="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 style a bit to be more like the example you mentioned.

Edit :

If you also need to be fixed below, you need to complicate it a bit more because the div has to remain fixed but vary the height from the end. If it was not fixed again, the top part where it was placed in the 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><divid="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 did not do it to make it clear to you.