code Reading progress bar style blue
đơn giản thôi code khi mình cross thanh bar xuống nó sẽ hiện thanh báo ở trên . mình cũng ko biết diễn tả đâu. xem demo ấy. code thử nghiệm trên blogger và invisie và phpbb3 ổn nhé. ai bị lỗi ở phpbb2 và punbb thì gửi link lên mình fix nhé
Code:
<style>
/* Reading progress bar */
#nprogress{pointer-events:none}
#nprogress .bar{background:#29d;position:fixed;z-index:1031;top:0;left:0;width:0;height:3px}
#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #29d,0 0 5px #29d;opacity:1;-webkit-transform:rotate(3deg) translate(0,-4px);-ms-transform:rotate(3deg) translate(0,-4px);transform:rotate(3deg) translate(0,-4px)}
</style>
<div id='nprogress'><div class='bar' role='bar'><div class='peg'></div></div></div>
<script>//<![CDATA[
!function(t){t.fn.viewportOffset=function(){
var o=t(this).offset();
return{top:o.top+t(window).scrollTop()};},t.fn.readingbar=function(){_=t(this);
var o=_.outerHeight(),r=1.65*_.offset().top,n=0;
t(document).on("scroll",function(){o=_.outerHeight(),n=(_.viewportOffset().top-r)/o*100,t("#nprogress .bar").css("width",n+"%"),t("#nprogress").css("opacity",n>100?"0":"1")})}}(jQuery);
jQuery(document).ready(function($) {$('.post-entry, .postbody, .post-body ').readingbar();
});
//]]></script>
Tags: #code #blogger #codefm