1. 程式人生 > >頁面滾動到底部,懸浮條固定到頁面底部。

頁面滾動到底部,懸浮條固定到頁面底部。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{margin: 0; padding: 0;    }
            body{height: 2800px;}
            p{
                height: 2700px;
                background: #d4d4d4;
            }
.qq{ width: 100%; height: 50px; } .qq1{ position:fixed; bottom:0; width: 100%; height: 50px; background: red; } .qq2{ height
: 50px
; background: #309BDF; }
</style> <script type="text/javascript" src="../../js/jquery.min.js" ></script> </head> <body> <p></p> <div class="qq"> <div class="qq1"></div>
</div> <div class="qq2"></div> </body> <script> $(document).ready(function() { $(window).scroll(function() { /* * $(document).scrollTop() 滾動條距離頂部的距離 * $(document).height() 文件的高度 * * $(window).height() 螢幕的高度 * $(".qq2").height() 底部版權的高度 * * if(滾動條距離頂部的距離 >= 文件的高度 - 螢幕的高度 - 底部版權的高度) * */ if ($(document).scrollTop() >= $(document).height() - $(window).height() - $(".qq2").height()) { $(".qq1").css("position","relative"); }else{ $(".qq1").css("position","fixed"); } }); }); </script> </html>