<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin:0; padding:0; } .bar{ position: fixed; top:0; left:0; width:0%; height:10px; background: #aa2; } .container{ width:100%; height:2000px; background: #fff; } </style> </head> <body> <div class="bar"></div> <div class="container"></div> </body> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var windowHeight=$(window).height(); var documentHeight=$(document).height(); //console.log(windowHeight); //console.log(documentHeight); $(window).scroll(function(){ var scrollHeight=$(document).scrollTop(); //console.log(scrollHeight); var n=documentHeight-windowHeight; var bili=scrollHeight/n; console.log(bili*100+"%") $(".bar").width(bili*100+"%"); }) }) </script> </html>