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

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

作者: 露露璐璐 | 来源:发表于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