使用滚动顶部显示滚动的像素

Using scrollTop to show pixels scrolled

本文关键字：滚动 像素 显示 顶部      更新时间：2023-09-26

我想通过使用jQuery中的scrollTop方法显示用户在我的网站中滚动的像素数。我希望像素数出现在名为"像素"的类中。

因此我可以有

<p><span class="pixels"><!--number of pixels here--></span> Pixels Scrolled</p>

我找到了一个网站，可以在它的页脚上做到这一点。这正是我想做的！您可以在此处找到该网站 http://chartbeat.com/

虽然我一直在寻找，似乎找不到该怎么做。任何帮助将不胜感激。提前谢谢。

下次在

问之前再努力一点：

$(function(){
  var $w = $(window), display = $(".pixels");
  $w.on("scroll", function(e){
    $display.text($w.scrollTop())
  });
});
​

http://jsfiddle.net/Mb45L/2/

它实际上就像下面一样简单：

(function(window, document, $, undefined) {
  $(function() {
    var win = $(window),
        ele = $('.pixels');
    win.scroll(function() {
      ele.text(win.scrollTop());
    });
  });
})(window, document, jQuery);

尝试使用 document.getElementsByTagName("body")[0].scrollTop

这样的东西？

<html>
 <head>
  <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
 </head>
 <body>
<p><span class="pixels" style="position:fixed"><!--number of pixels here--></span>     Pixels Scrolled</p>
<?php for($x=0;$x<100;$x++) { echo "<br>"; } ?>
<script type="text/javascript">
$(document).ready(function() {
   $(document).scroll(function() {
      $(".pixels")[0].innerHTML = $(document).scrollTop();
   });
});
</script>
 </body>
</html>
相关文章：