javascript - jQuery 计算页面滚动厘米数 - 计数器

标签 javascript jquery

我发现了很多向上和向下计数的插件,但我正在寻找更有趣的东西:

我有一个 70.000 厘米高的 HTML 页面,我想在 Angular 落里放一个计数器,当您向下滚动时,它会显示您所在的高度。

fiddle 似乎毫无意义,如果有人遇到过插件或稍微知道从哪里开始,将不胜感激。

最佳答案

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

    <script type="text/javascript">
    $(function() {
        $.fn.calc_height();
        $(window).bind('scroll', function() {
            $.fn.calc_height();
        });
    });

    $.fn.calc_height = function() {
        var window_scroll_top = $(window).scrollTop();
        var window_scroll_top_cm = window_scroll_top * 0.026458333;
        $('.currentheight').html( window_scroll_top_cm.toFixed(2) + ' cm' );
    };
    </script>

    <style>
    body { height:264566.92913386px; background:#666; text-align:center; font-family:Arial, Helvetica, sans-serif;}
    .currentheight { position:fixed; top:20px; left:20px; background:#FFF; color:#000; padding:10px 20px;}
    </style>
</head>

<body>
<div class="currentheight">asd</div>
</body>
</html>

关于javascript - jQuery 计算页面滚动厘米数 - 计数器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31985233/

相关文章:

jquery - Bootstrap-Select Accordion 的 z-index 问题

javascript - 如何动态获取分页插件类名?

javascript - 使用 python 抓取从网页中嵌入的传单应用程序获取坐标

javascript - WebComponentsReady 在 safari 中触发得太快?

javascript - 比较 moment.js 上的日期

javascript - 在没有服务器的情况下运行html时如何将文件夹设置为根路径

javascript - 匹配一个 buttonid 并改变它的 onclick 属性

javascript - PHP 和 javascript (EXTJS) - 以服务器端 OOP 方式验证表单字段

javascript - 将 HTML <select> 元素保存到变量中而不创建数组

javascript - 带有参数(托管图像的 URL)的 Ng map 标记图标不起作用