I have a popup that serves to recommend other posts but appears in the footer. I would like the popup to appear higher up, type in the middle of the page, ie to control where it should appear. Any tips?
I have a popup that serves to recommend other posts but appears in the footer. I would like the popup to appear higher up, type in the middle of the page, ie to control where it should appear. Any tips?
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 visible area I could thus interpret this if
as:
if (distanciaTopo >= alturaPagina - tamanhoJanela){
If you want the if
to fire earlier, you only need to subtract the pixel value you want. For example, to display the% of pixel values 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><divid="wrapper">
<div class="arrow animated bounce">
</div>
</div>
<div class="popup">
<div class="close ns-close"></div>
</div>
I have defined the CSS for the answer does not get giant and since the focus is Javascript