固定弹层叉掉
<style>
/* 20131126 优谈宝宝下载弹层 */
/* 优谈宝宝下载弹窗 */
body { padding-bottom: 50px;}
.app-download { position: absolute;position: fixed; left: 0; bottom: 0; z-index: 900; width: 100%; padding: 5px 10px 5px 60px; background: rgba(0, 0, 0, 0.65); color: #fff; overflow: hidden;}
.app-download a { display: block;}
.app-download img { position: absolute; left: 10px; top: 6px; max-width: 40px;}
.app-download figcaption { color: #fff;top:6px;}
.app-download p { font-size: 12px; color: #c8c8c8;top:6px;}
.app-download .btn-download { position: absolute; top: 50%; right: 10px; padding: 4px 12px; background: #ff7800; color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; -webkit-transform: translateX(0) translateY(-50%) translateZ(0); -moz-transform: translateX(0) translateY(-50%) translateZ(0); -ms-transform: translateX(0) translateY(-50%) translateZ(0); transform: translateX(0) translateY(-50%) translateZ(0);}
.app-download .btn-close { position: absolute; bottom: -16px; left: -16px; width: 40px; height: 40px; font-size: 20px; line-height: 30px; text-indent: 18px; color: #fff; background: rgba(0, 0, 0, 0.6); -webkit-border-radius: 10em; -moz-border-radius: 10em; -ms-border-radius: 10em; border-radius: 10em;}
.app-download .btn-close:hover { color: #fff;}
</style>
<aside class="app-download" id="program_app">
<a href="http://www.utan.com/promoted/?promotedcode=925">
<figure>
<figcaption>优谈宝宝</figcaption>
<img src="<?php echo $this->domain('static', 'image')?>utanbaby/common/icon_app.png" alt="优谈宝宝" />
<p>给您和孩子世界级的呵护!</p>
</figure>
<i class="btn-download" id="app_download">立即打开</i>
</a>
<a href="###" onclick="document.getElementById('program_app').style.display='none';return false;" class="btn-close" id="app_download_close">×</a>
</aside>
<?php endif?>
<script>
var product = [];
var first = 0;
$('.PROGRAM-qaBoxId').each(function(){
var id = $(this).data('pid');
var i = $(this).data('k');
product.unshift({i:i, id:id, top:$(this).offset().top});
if(first <= 0) {
first = $(this).offset().top;
}
});
if (isNaN(parseInt(first))) {
first = 0;
}
var timeHandle = null, timeHandle1 = null;
//touchmove事件,这个事件无法获取坐标
function touchMoveFunc(evt) {
try {
for (var k in product) {
//console.log(window.scrollY +'>'+ product[k].top);
if (window.scrollY > product[k].top) {
if (timeHandle != null) {
window.clearTimeout(timeHandle);
}
timeHandle = window.setTimeout(function(){
window.clearTimeout(timeHandle);
$('.PROGRAM-product').hide();
$('#fp_'+product[k].i).show();
}, 500);
}
if (window.scrollY < first) {
if (timeHandle1 != null) {
window.clearTimeout(timeHandle1);
}
timeHandle1 = window.setTimeout(function(){
window.clearTimeout(timeHandle1);
$('.PROGRAM-product').hide();
}, 500);
}
}
} catch (e) {
}
}
try {
document.createEvent("TouchEvent");
document.addEventListener('touchmove', touchMoveFunc, false);
} catch (e) {
window.onscroll = function(){
touchMoveFunc();
};
}
</script>
浙公网安备 33010602011771号