How to place a popup at a particular page location

Question

I have a popup that serves to recommend other posts but appears on the footer. I would like the popup to appear higher up, like in the middle of the page, that is, control where it should appear. Any hint?

https://codepen.io/mfritsch/pen/VYdeEE

Answer 1

The test you have in Jquery tests whether the user has reached the bottom of the page:

if ($(window).scrollTop() >= ($(document).height() - $(window).height())) {

We have to:

• $(window).scrollTop() - Distance from the top of the window to the top of the page
• $(document).height() - Full page height
• $(window).height() - Height only of the visible area

I could thus interpret this if as:

if (distanciaTopo >= alturaPagina - tamanhoJanela){

If you want the if is triggered earlier you just need to subtract the pixel value you want. Example to show the 500 pixels of the end:

if ($(window).scrollTop() >= ($(document).height() - $(window).height() - 500)) {

Example with HTML, CSS and JS you have in codepen:

$(document).ready(function() {

  $(window).scroll(function() {
    if ($(window).scrollTop() >= ($(document).height() - $(window).height()-500)) {
      $('.popup').css("left", "20px")
      $('.arrow').hide();
    } else {
      $('.popup').css("left", "-380px");
      $('.arrow').show();
    }
  });

  $('.close').click(function() {
    $('.popup').hide();
  });

});

#wrapper,body{position:relative;background:#27AE60}hmtl{box-shadow:inset 0 0 90px rgba(0,0,0,.5);height:100%}body{margin:0;padding:0}#wrapper{width:1000px;height:1000px;margin:0 auto;-webkit-box-shadow:0 0 20px 0 rgba(50,50,50,.1);-moz-box-shadow:0 0 20px 0 rgba(50,50,50,.1);box-shadow:0 0 20px 0 rgba(50,50,50,.1);transition:box-shadow .8s}#wrapper:hover{-webkit-box-shadow:0 0 20px 0 rgba(50,50,50,.3);-moz-box-shadow:0 0 20px 0 rgba(50,50,50,.3);box-shadow:0 0 20px 0 rgba(50,50,50,.3)}.popup{width:380px;height:180px;background:#67C58F;bottom:20px;left:-380px;position:fixed;border-radius:5px;box-shadow:0 25px 10px -15px rgba(0,0,0,.05);transition:.5s}.close,.ns-close{width:20px;height:20px;cursor:pointer;position:absolute}.close{top:5px;right:5px;z-index:500}.ns-close{right:4px;top:4px;overflow:hidden;text-indent:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}.ns-close:focus,.ns-close:hover{outline:0}.ns-close::after,.ns-close::before{content:'';position:absolute;width:3px;height:60%;top:50%;left:50%;background:#1f8b4d}.ns-close:hover::after,.ns-close:hover::before{background:#fff}.ns-close::before{-webkit-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.ns-close::after{-webkit-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}@-moz-keyframes bounce{0%,100%,20%,50%,80%{-moz-transform:translateY(0);transform:translateY(0)}40%{-moz-transform:translateY(-30px);transform:translateY(-30px)}60%{-moz-transform:translateY(-15px);transform:translateY(-15px)}}@-webkit-keyframes bounce{0%,100%,20%,50%,80%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}@keyframes bounce{0%,100%,20%,50%,80%{-moz-transform:translateY(0);-ms-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0)}40%{-moz-transform:translateY(-30px);-ms-transform:translateY(-30px);-webkit-transform:translateY(-30px);transform:translateY(-30px)}60%{-moz-transform:translateY(-15px);-ms-transform:translateY(-15px);-webkit-transform:translateY(-15px);transform:translateY(-15px)}}.arrow{position:fixed;bottom:50px;left:50%;margin-left:-20px;width:20px;height:20px;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);background-size:contain}.bounce{-moz-animation:bounce 2s infinite;-webkit-animation:bounce 2s infinite;animation:bounce 2s infinite}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="arrow animated bounce">
  </div>
</div>
<div class="popup">
  <div class="close ns-close"></div>
</div>

^{I minified the CSS so the answer doesn’t get giant and since the focus is Javascript}