Thứ Sáu, 10 tháng 7, 2015

Cài đặt phần trăm Trong thanh cuộn

Bằng cách thêm vào tỷ lệ này không chỉ là trang trí ngoài ra giúp blog sẽ có thể nhìn thấy tỷ lệ phần trăm khi di chuyển, nếu nó đã đạt đến dưới cùng của trang sau đó tỷ lệ này sẽ là 100%. Đầu tiên bạn lưu mã sau đoạn

]]></b:skin>
hoặc
</style>

#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#369fcf;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
}

dán đoạn code sau thẻ
</head>
<div id='scroll'></div>
Và đoạn sau
</body>
<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>

0 nhận xét:

Đăng nhận xét