Get the position of the scrollbar using javascript

Question

So I am trying to show a tooltip like box as I scroll my webpage and I would like it to follow the scrollbar along the right side of the page.

I looked around and found something to attempt to accomplish that as shown below:

function returnPercentHeight(){
    var a = document.getElementById('rightPanel').scrollTop;
    var b = document.getElementById('rightPanel').scrollHeight - document.getElementById('rightPanel').clientHeight;
    return ((a/b) * 100);
}

I then append a % to the end and set the top margin of the tooltip to that returned value. This works pretty well (sort of) I have to adjust the return((a/b) * x) part (x) to make it follow the scrollbar based on the size of the browser window. Is there a better way to accomplish what I am trying to do? (NOTE: I can only use javascript, no JQuery please.)

EDIT:

Only the div given an ID of 'RightPanel' is scrolling, I am not using the scrollbar on the browser, but a scrollbar on an inner div.

stackoverflow.com/questions/2481350/…

İsmet Alkan
– İsmet Alkan

2014-06-25 13:02:43 +00:00
Commented Jun 25, 2014 at 13:02 — İsmet Alkan
– İsmet Alkan, Commented Jun 25, 2014 at 13:02
stackoverflow.com/questions/11193453/…

İsmet Alkan
– İsmet Alkan

2014-06-25 13:03:04 +00:00
Commented Jun 25, 2014 at 13:03 — İsmet Alkan
– İsmet Alkan, Commented Jun 25, 2014 at 13:03
softcomplex.com/docs/…

İsmet Alkan
– İsmet Alkan

2014-06-25 13:03:34 +00:00
Commented Jun 25, 2014 at 13:03 — İsmet Alkan
– İsmet Alkan, Commented Jun 25, 2014 at 13:03
digitaldreamer.net/blog/2010/5/9/…

İsmet Alkan
– İsmet Alkan

2014-06-25 13:03:51 +00:00
Commented Jun 25, 2014 at 13:03 — İsmet Alkan
– İsmet Alkan, Commented Jun 25, 2014 at 13:03
dropshado.ws/post/4214189829/…

İsmet Alkan
– İsmet Alkan

2014-06-25 13:04:42 +00:00
Commented Jun 25, 2014 at 13:04 — İsmet Alkan
– İsmet Alkan, Commented Jun 25, 2014 at 13:04

Explisam · Accepted Answer · 2018-04-15 06:57:47Z

2

There are three ways to do so:

First:

is to use the fixed position as following;

Position: Fixed;

Second:

With jQuery;

$(function(){
   $(window).on('scroll', function() {
     var scrollPOS = $(document).scrollTop();
     $('.scroll').css({
        top: scrollPOS
     });
   }).scroll();
});

Third:

Same as the previous, only animated;

$(window).on('scroll', function() {
  $("#div").stop().animate({
     "marginTop": ($(window).scrollTop()) + "px", 
     "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
});

edited Apr 15, 2018 at 6:57

answered Jun 25, 2014 at 14:37

Explisam

74913 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

İsmet Alkan · Accepted Answer · 2014-06-25 13:07:03Z

0

Although IE doesn't support, this is the coolest I've seen:

// get
var x = window.scrollX,
    y = window.scrollY;

// set
window.scrollTo(1, 2);

answered Jun 25, 2014 at 13:07

İsmet Alkan

5,4474 gold badges43 silver badges64 bronze badges

1 Comment

Jacob Over a year ago

I should mention that the whole page isn't scrolling, just one div on half the page.

Collectives™ on Stack Overflow

Get the position of the scrollbar using javascript

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related