CODEWITHSUNDEEP
javascriptjquery
tanya
tanya

Reputation: 301

jQuery count cm on page scroll - counter

I have found many plugins counting up and down, but I am looking for something more interesting:

I have a HTML page 70.000cm high, I want to put a counter in a corner which will show the height you are at as you scroll down.

A Fiddle seemed pointless, if someone has encountered a plugin or has a slight idea of where to start, would be very much appreciated.

Upvotes: 0

Views: 631

Answers (3)

wkyip
wkyip

Reputation: 500

<!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>

Upvotes: 1

Dynamic Remo
Dynamic Remo

Reputation: 531

You can start with this simple line of code and build the required amount of logic and programming around this. Its based on jQuery builtin function animate, first parameter contains options and the second is a time for that particular animation you try.

$("html, body").animate({ scrollTop: $(document).height() }, 1000);

Cheers :)

Upvotes: 0

Mihai Matei
Mihai Matei

Reputation: 24276

You may try something like this:

$(document).scroll(function(){
  $('div').html(($('body').scrollTop() * 0.026458333).toFixed(2) + 'cm');
});

demo

Upvotes: 0

Related Questions