敢问路在何方

scroll与按钮的位置 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scroll</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    header{
        width: 100%;
        height: 100px;
        background:rgba(0,0,0,0.8);
        position: fixed;
        left: 0;
        top: 0;
        text-align: center;
        font-size: 25px;
        line-height: 100px;
        color: #fff;
        font-family: "微软雅黑";
    }
    footer{
        width: 100%;
        height: 300px;
        background:rgba(0,0,0,0.8);
        text-align: center;
        font-size: 25px;
        line-height: 100px;
        color: #fff;
        font-family: "微软雅黑";
    }
    .content{
        width: 100%;
        height: 2500px;
    }
    .btn{
        position: fixed;
        left: 60%;
        bottom: 5px;
        padding: 15px 30px;
        border-radius: 10px;
        background:green;
        color: #fff;
        font-size: 25px;
        cursor: pointer;
    }
</style>
<body>
    <header>
        scroll  与  按钮的位置        
    </header>
    <div class="content"></div>
    <footer> 按钮在footer顶部</footer>
    <div class="btn">我在屏幕最舒服的位置</div>
</body>
<script src = "jquery.js"></script>
<script>
    $(window).scroll(function(){
        var btn = $(".btn");
        var scrollTop = $(document).scrollTop(); //滚动条到顶部的距离
        var textHeight = $(".content").height() + $("footer").height(); //文档的高度
        var pageHeight = $(window).height() //当前页面的高度
        var scrollBottom = textHeight - pageHeight - scrollTop; //滚动条到底部的距离
        var footerHerght = $("footer").height(); //footer的高度
        var value = 100;
        console.log(scrollBottom);
        if(scrollBottom < footerHerght){
            //滚动条到底部的距离 小于 footer高度 按钮放在footer之上
            btn.css("bottom", footerHerght - scrollBottom + 5  + 'px' )
        }else{
            btn.css("bottom", "5px");
        }
    })
</script>    
</html>

 

posted @ 2016-08-11 11:07  敢问  阅读(592)  评论(0)    收藏  举报