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

1.html部分


        

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

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

你可能感兴趣的:(鼠标滑到底部时出现弹框,向上滑动时不出现)