固定弹层叉掉

<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">&times;</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>

posted on 2014-12-17 12:31  鬼鬼丫404  阅读(138)  评论(0)    收藏  举报

导航