将垂直滚动位置绑定到计​​数器

我猜这很容易，但我是jQuery的新手，所以我有点失落。

设置相对于用户垂直滚动位置的数字动画的最佳方法是什么？ 我正在做一个百万像素长的div，想要一个从0到100万的固定数字。 我是否正确地说我必须使用.scrollTop（）函数？

为先进的任何帮助干杯！

乙

Answer 1

以下代码可以帮助您入门。 如果将html标记的高度增加到100万像素，则会有一个具有所需范围的计数器。

源代码来自此页面 。 我刚从中创建了jsFiddle 。

$(function() { // move the counter with page scroll // source from this page http://www.pixelbind.com/make-a-div-stick-when-you-scroll/ var s = $("#counter"); var pos = s.position(); $(window).scroll(function() { var windowpos = $(window).scrollTop(); s.html("Distance from top:" + pos.top + "
Scroll position: " + windowpos); if (windowpos >= pos.top) { s.addClass("stick"); } else { s.removeClass("stick"); } }); }); 

 html { /*force to show vert. scrollbar*/ overflow-y: scroll; height: 1000200px; background: url("http://placehold.it/1000x500"); } div#counter { padding:20px; margin:20px 0; background:#AAA; width:190px; } .stick { position:fixed; top:0px; } 

  
Dummy text. just to show distance from top calculation.