jQuery显示页面滚动进度

1、新建html文档。

3、书写css代码。h1 { margin: 40px 0; font-size: 40px; line-茑霁酌绡height: 40px; font-weight: bold; text-shadow: 0px 1px 1px #888; -webkit-font-smoothing: antialiased; }h2 { font-size: 28px; color: #fff; font-weight: normal; text-align: left; margin-bottom: 20px; text-shadow: 1px 1px 0 #1e88ce; }a { text-align: left; text-decoration: none; color: #fff; margin: 0 10px; }p { line-height: 32px; padding: 0 0 40px 0; text-align: left; }.btn { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; display: inline-block; overflow: hidden; height: 50px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; line-height: 50px; padding: 0 30px; font-size: 14px; font-weight: bold; -webkit-box-shadow: 0 3px 0 0 #1275b7; box-shadow: 0 3px 0 0 #1275b7; background-color: #1e88ce; }.btn:active, .btn.active { top: 2px; -webkit-box-shadow: 0 1px 0 0 #1275b7; box-shadow: 0 1px 0 0 #1275b7; }.content { width: 60%; float: left; margin: 45px 0; padding: 0 3% 0 0; border-right: 1px solid rgba(255,255,255,.4); }.progress { position: relative; float: left; text-align: left; width: 330px; padding: 45px 0 0 2%; }.progress .wrapper { position: absolute; width: inherit; }.progress .wrapper.affix { position: fixed; top: 10px; }.progress .bar { position: relative; display: block; width: 100%; height: 40px; margin-bottom: 10px; background-color: #1c92db; }.progress .bar span { position: absolute; display: block; top: 0; width: 0; height: 40px; z-index: 0; background-color: #1275b7; }.progress .bar a { line-height: 40px; position: relative; z-index: 1; }.progress .bar i { position: absolute; right: -30px; height: 40px; line-height: 40px; color: #36a7f3; -webkit-transition: color .3s; transition: color .3s; }.footer { height: 470px; font-size: 28px; text-align: center; line-height: 470px; background-color: #444; }#demo-bar { position: fixed; left: 10px; top: 10px; width: 150px; z-index: 10000; }#demo-bar.right { right: 20px; left: auto; }#demo-bar.bottom { bottom: 10px; top: auto; }#demo-bar img { margin: 0 10px; border: 2px solid #ddd; transition: border .3s; -webkit-transition: border .3s; }#demo-bar img:hover { border-color: #fff; }#demo-bar span.yoggrt-wrap { font-size: 12px; }#demo-bar a { margin: 0; }#demo-bar a.yoggrt-poweredby { display: block; font-size: 10px; color: #eee; }

5、代码整体结构。