English 中文(简体)
使用滚动图显示滚动的像素
原标题:Using scrollTop to show pixels scrolled

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

因此,我本可以

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

我找到了一个网站, 它在它的脚脚下完成它。 它正是我想做的! 您可以在这里找到这个网站 < a href=> http://chartbeat.com/" rel="nofollow" > 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. getE元素ByTagName ("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>




相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签