美文网首页
鼠标滑到底部时出现弹框,向上滑动时不出现

鼠标滑到底部时出现弹框,向上滑动时不出现

作者: 露露璐璐 | 来源:发表于2018-06-05 19:02 被阅读0次

1.html部分

<!--分享弹框-->
        <div class="chat-box chat-box-share">
            <div class="chat-tip">
                <img src="img/sharetoast.gif" alt="" id='share'/>
                <span class="close-btn"></span>
            </div>
        </div>
    <!--分享-->

2.css部分

chat-box{
    width: 100%;
    position: fixed;
    top: 0rem;
    z-index: 2;
    display: none;
    background: rgba(0,0,0,0.5);
}
.chat-tip{
    position: absolute;
    left: 10%;
    top: 22%;
    /*top: 50%;*/
    width: 80%;
    height: 3.2rem;
    padding: 0.3rem;
    margin-top: -1.6rem;
    /*background: #FFFFFF;*/
    text-align: center;
    border-radius: 0.2rem;
}
#share{
    width: 100%;}
.chat-tip p{
    font-size: 0.4rem;
    font-weight: bold;
    margin-bottom: 0.3rem;
}
.chat-tip button{
    width: 3rem;
    height: 1rem;
    background: #4DCC01;
    text-align: center;
    line-height: 1rem;
    border: none;
    font-size: 0.35rem;
    border-radius: 0.2rem;
    outline: none;
}
.chat-tip button a{
    color: #FFFFFF;
}
.chat-tip .close-btn{
    position: absolute;
    top: -0.1rem;
    right: -0.1rem;
    width: 0.6rem;
    height: 0.6rem;
    background: url(../img/hudong-detail/close_btn.png) center center no-repeat;
    background-size: 100%;
}

3.js

  var toggle= false;
        window.onscroll=function(){
            var max = document.body.offsetHeight;
            console.log(listH);
            if(scrollY>max-listH-innerHeight && !toggle){
                toggle=true;
                $('.chat-box-share').height($(window).height());
                $('.chat-box-share').show();
                console.log("打开窗口")
            }
            // if(scrollY<max-listH-innerHeight && toggle){
            //     toggle=false;
            // }
        }

注:js中注释掉的是代表弹窗在页面中只出现一次,不注释则代表鼠标上下滑动时在距离底部100px时出现弹框,向上滑动时则没有出现弹框

相关文章

网友评论

      本文标题:鼠标滑到底部时出现弹框,向上滑动时不出现

      本文链接:https://www.haomeiwen.com/subject/jrumsftx.html