完整代碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.test{width:100%;overflow:hidden;margin-top:1000px}
.bar_group__bar.thin::before{display:block;content:'';position:absolute;z-index:-1}
.bar_group__bar.thin::before{width:100%;height:5px;border-radius:0px;background:#E4E4E4}
.bar_group__bar.thin{width:0%;height:5px;border-radius:0px;background:#E84C3D;margin-bottom:10px;-webkit-transition:width 1s;transition:width 1s}
.b_label,.bar_label_min,.bar_label_max,.b_tooltip span{color:#999;font-size:14px;margin:.5em 0}
.bar_group.group_ident-1{z-index:0;position:relative;width:85%;margin:0 auto}
.bar_label_max{position:absolute;right:0%}
.bar_label_min{position:absolute}
.b_tooltip{-webkit-transition:all 1s;transition:all 1s;position:relative;float:left;left:100%;padding:4px 10px 7px 10px;background-color:rgba(67,66,76,0.81);-webkit-transform:translateX(-50%) translateY(-30px);-ms-transform:translateX(-50%) translateY(-30px);transform:translateX(-50%) translateY(-30px);-o-transform:translateX(-50%) translateY(-30px);border-radius:0px;line-height:11px}
.b_tooltip span{color:white}
.b_tooltip--tri{width:0;height:0;position:absolute;content:'';bottom:-5px;left:0;right:0;margin:auto;display:block;border-style:solid;border-width:5px 5px 0 5px;border-color:rgba(67,66,76,0.81) transparent transparent transparent}
</style>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<h1>只有在距離頂部超過一屏之後代碼纔會被激活↓↓</h1>
<div class="test">
<div class='bar_group'>
<div class='bar_group__bar thin' label='參觀總人數（萬）' show_values='true' tooltip='true' value='1500'></div>
<div class='bar_group__bar thin' label='參展商總數' show_values='true' tooltip='true' value='800'></div>
<div class='bar_group__bar thin' label='現場成交量' show_values='true' tooltip='true' value='1000'></div>
<div class='bar_group__bar thin' label='總交易額（億）' show_values='true' tooltip='true' value='1200'></div>
</div>
</div>
<script>
function bar_group(){group_ident=1,$(".bar_group").each(function(){$(this).addClass("group_ident-"+group_ident),$(this).data("gid",group_ident),group_ident++})}function get_max(){$(".bar_group").each(function(){var t=[];$(this).children().each(function(){t.push($(this).attr("value"))}),max_arr["group_ident-"+$(this).data("gid")]=t,void 0!==$(this).attr("max")?$(this).data("bg_max",$(this).attr("max")):$(this).data("bg_max",Math.max.apply(null,t))})}function data_labels(){$(".bar_group__bar").each(function(){void 0!==$(this).attr("label")&&$('<p class="b_label">'+$(this).attr("label")+"</p>").insertBefore($(this))})}function show_values(){$(".bar_group__bar").each(function(){"true"==$(this).attr("show_values")&&($(this).css("margin-bottom","40px"),void 0!==$(this).attr("unit")?($(this).append('<p class="bar_label_min">0 '+$(this).attr("unit")+"</p>"),$(this).append('<p class="bar_label_max">'+$(this).parent().data("bg_max")+" "+$(this).attr("unit")+"</p>")):($(this).append('<p class="bar_label_min">0</p>'),$(this).append('<p class="bar_label_max">'+$(this).parent().data("bg_max")+"</p>")))})}function show_tooltips(){$(".bar_group__bar").each(function(){"true"==$(this).attr("tooltip")&&($(this).css("margin-bottom","40px"),$(this).append('<div class="b_tooltip"><span>'+$(this).attr("value")+'</span><div class="b_tooltip--tri"></div></div>'))})}function in_view(t){var a=$(t),i=$(window),s=i.scrollTop(),r=s+i.height(),n=a.offset().top,o=n+a.height();r>o-45&&a.css("width",a.attr("value")/a.parent().data("bg_max")*100+"%")}function bars(){bar_group(),get_max(),data_labels(),show_tooltips(),show_values()}max_arr={},$(".bar_group__bar").each(function(){in_view($(this))}),$(window).scroll(function(){$(".bar_group__bar").each(function(){in_view($(this))})}),bars();
</script>
</body>
效果
