CSS“深度计”（屏幕后面的div和更改数字）

Question

有没有人知道如何用小图像制作小div让我们说50x50像素跟随网页内滚动（让我们说它居中的垂直并拥抱屏幕的一面）+旁边的div它从屏幕顶部改变数字0我在这个页面上找到了类似的东西，但是看不出它是如何工作的 http://www.jana-water.com/hr/o-jani。如果有人知道如何制作它将是gr8.I谷歌搜索它但不知道什么叫“技术”。

Answer 1

这个怎么样？

http://jsfiddle.net/zzkf5/1/

JavaScript获取'深度'：

var depthMeter = $('#depthMeter');

$(window).scroll(function(){
    depthMeter.text($(this).scrollTop());
});

CSS将元素固定在右侧：

#depthMeter {
    position: fixed;
    top: 50%;
    right: 0;

    margin-top: -25px; // Half the height, because top: 50% does not factor in the element's height

    height: 50px;
    width: 50px; 
}