A moving cursor responsive to scrolling

[Grandioso]

So here's a little useless decorative, but cool feature I imagine for my website.

 

I want to build a simple website with only one page and a couple of paragraphs. There will be a floating vertical "navigation" on the side - only images, one for each paragraph (these will be linked to the paragraph and smoothscroll to it when clicked. I want to put some kind of indicator next to this navigation that will show where exactly on the page the user is - it will move along the images as the user scrolls. It would be awesome if the user could grab it and scroll the page with it, but that's not necessary.

How I imagine it: the script first checks the height of the window it is displayed in (lets call this h). It divides the height of the navigation (it's probably a fix 400px) with h to get the ratio ® and it draws a line from the top of the navig to r and is ready to move as the user scrolls. It needs to work on smartphone browsers as well, so it should respond to changes in window size appropriately.

 

The indicator should be just a simple "line" - a few pixels wide, preferably with rounded corners. Maybe a floating div element ?

 

Is there such a thing out there for me to use, or do I need to program it myself ? It would be great if there was a jQuery plugin that could do this.

[freelance84]

 

 

 

Hmm.. cool.

 

 

I don't know anything like this. I have seen something similar in firefox's pdf viewer though.

 

 

1 - I was going to say you could combine the query div sliders with this. As the user slide the handle down, measure the distance the handle is from the top of its container and replicate this on your pic navigation. However as your on a mobile you can't do this as most cannot scroll on a div.

 

 

2 - You could fire an onscroll event on the window, if <p para="1">Sdvsdtgbrdgn gchn bn</p> distance from position y on screen is x, animate your indicators position on the nav bar..

[kicken]

If I'm understanding what you want (sounds like what TortoiseMerge has) it could probably be done fairly simply for desktop browsers at least.  Not sure about mobile compatibility though.

 

Basically you'd just create a div that is position:fixed on the side of the window, set to 100% height.  Have an image or a styled div inside there as your marker/indicator.  As the user scrolls through the page have a small bit of JS calculate the position and move the marker accordingly.