Mob exit pop script (10)
Hi everyone
This is my very first post on STM 
I want to share with community little trick that helped me to increase roi on some landings. It is not the best solution but you can test it, maybe it will be helpful for you.
So, the topic is Exit pop for mobile. The script is simple and uses a scroll direction and speed. When a user uses speed scrolling for seeing a browser controls for closing a tab, script triggers and shows a pop. No jquery, just clear Javascript.
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Mobile comebacker</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*comebacker's styles*/
.new-comebacker-overlay {
top:0;
left:0;
right:0;
bottom:0;
display:none;
z-index:99999;
position:fixed;
overflow-y:auto;
background:rgba(0, 0, 0, 0.7);
}
.new-comebacker-to-middle {
width:100%;
height:100%;
display:table;
}
.new-comebacker-wrapp {
position:relative;
display:table-cell;
vertical-align:middle;
}
.new-comebacker-content {
width:600px;
margin:auto;
text-align:center;
position:relative;
border-radius:5px;
background:#ffffff;
padding:20px 10px 20px;
}
.new-comebacker-close {
top:-5px;
z-index:6;
right:-5px;
width:28px;
height:28px;
color:#ffffff;
cursor:pointer;
font-size:18px;
line-height:28px;
position:absolute;
border-radius:50%;
font-family:sans-serif;
background-color:firebrick;
}
.new-comebacker-wrapp strong {
display:block;
font-size:22px;
line-height:1.3;
font-weight:normal;
font-family:sans-serif;
}
.new-comebacker-wrapp strong span {
display:inline-block;
text-decoration:underline;
}
.new-comebacker-wrapp .new-comebacker-btn {
height:60px;
width:280px;
display:block;
color:#ffffff;
font-size:22px;
line-height:57px;
border-radius:5px;
margin:20px auto 0;
background:firebrick;
text-decoration:none;
font-family:sans-serif;
text-transform:uppercase;
}
@media screen and (max-width: 660px) {
.new-comebacker-content {
width:auto;
margin-left:10px;
margin-right:10px;
padding:20px 10px 20px;
}
.new-comebacker-wrapp strong { font-size:18px; }
}
/*comebacker's styles end*/
</style>
</head>
<body style="min-height:1500px;">
<div class="new-comebacker-overlay" id="new-comebacker-overlay">
<div class="new-comebacker-to-middle" id="new-comebacker-to-middle">
<div class="new-comebacker-wrapp" id="new-comebacker-wrapp">
<div class="new-comebacker-content" id="new-comebacker-content">
<div class="new-comebacker-close" id="new-comebacker-close">X</div>
<strong>This is your exit pop</strong>
</div>
</div>
</div>
</div>
<script>
var comebackOverlay = document.getElementById("new-comebacker-overlay");
var comebackWrapp = document.getElementById("new-comebacker-wrapp");
var comebackContent = document.getElementById("new-comebacker-content");
var comebackClose = document.getElementById("new-comebacker-close");
var checkScrollSpeed = (function(settings) {
settings = settings || {};
var lastPos, newPos, timer, delta, delay = settings.delay || 50;
function clear() {
lastPos = null;
delta = 0;
}
clear();
return function() {
newPos = window.scrollY;
if(lastPos != null) {
delta = newPos - lastPos;
}
lastPos = newPos;
clearTimeout(timer);
timer = setTimeout(clear, delay);
return delta;
};
})();
function iOS() {
var iDevices = [
'iPad Simulator',
'iPhone Simulator',
'iPod Simulator',
'iPad',
'iPhone',
'iPod'
];
if (!!navigator.platform) {
while (iDevices.length) {
if (navigator.platform === iDevices.pop()){ return true; }
}
}
return false;
}
var flag1 = true;
var lastScrollTop = 0;
window.onscroll = function() {
var isIos = iOS();
var scrollSpeedLimit = 0;
if(isIos) scrollSpeedLimit = -30;
else scrollSpeedLimit = -80;
var st = window.pageYOffset || document.documentElement.scrollTop;
var scrollSpeed = checkScrollSpeed();
if(st < lastScrollTop){
if(scrollSpeed < scrollSpeedLimit && flag1 == true) {
comebackOverlay.style.display="block";
flag1 = false;
}
}else {
//downscroll
}
lastScrollTop = st;
};
comebackWrapp.onclick = function(e) {
comebackOverlay.style.display="none";
}
comebackClose.onclick = function(e) {
comebackOverlay.style.display="none";
}
comebackContent.onclick = function(e) {
e.stopPropagation();
}
</script>
</body>
</html>
Thanks for the share!
Have you tested this on multiple browsers and if so, were there some where it didn't work?
Matej.
Tested on iOS - Safari, Chrome, Firefox - passed
iOS Opera mini - doesnt work (it isn't big problem due to small use percentage)
Android - Chrome, Firefox, Opera - passed
Thanks so much for the generous share Leon! 
And welcome to the community!
Amy
so how should i use it?
just paste above code on my LP or create .js file and attach to index.html ?
I want to be useful for community and learn how to earn more on AM, thats it
so, you can do the next
you can copy-paste the js code into your lander
put some attention attractive stuff into the div new-comebacker-overlay
and dont forget for css for new-comebacker-overlay - you can remake it to your lander's style or make something very different for bigger users attention
Interesting approach with the scrolling detection, thanks for share!
So how does this exactly work?
It detects when a user starts scrolling up fast?
^^^ Yes, once you start scrolling up fast it shows the overlay/popup.
Home > Technical & Creative Skills > Programming, Servers & Scripts