Hi All i am trying to make a floating div that slides along with the movement of the browser scrollbar. As you know as you increase the browser window size the scrollbar height increases.

I would like the div to follow along a vertical path aligned with the middle of the scrollbar.. Can't seem to figure out how to do this. The main issue i have is figuring out the size of the scrollbar. Any help is appreciated. thanks!

2 answers

0
points

This is not directly possible.

The only workaround I can think of would be by calculating the height of the document and the heigt of the browser. Then you can do some calculations using those 2 values and you should be able to figure it out.

Answered almost 7 years ago by FinalFrag
Mottie 1134
0
points

I made a demo that simulates the scroll bar. It is pretty much as FinalFrag describes, but I'm using jQuery because it gets around all the cross browser problems more easily.

This is the basic code:

CSS

#bar { position: fixed; top: 0; right: 0; width: 20px; background: #555; height:0; }

HTML

<div id="bar"></div>

Script

$(document).ready(function(){
 makeBar();
 $(window).scroll(function(){
  makeBar();
 })
})
function makeBar(){
 var margin = 20; // margin from top (up arrow height)
 var windowHeight = $(window).height() - margin;
 var windowScrollTop = $(window).scrollTop();
 var bodyHeight = $('body').height();
 // don't show the bar if there is no window scroll bar
 if (bodyHeight < windowHeight) { return; }
 var percentDiff = windowHeight/bodyHeight;
 $('#bar').css({ top: margin/2 + (windowScrollTop * percentDiff), height: windowHeight * percentDiff})
}
Answered almost 7 years ago by Mottie