Question

I'm attempting to make a div that moves up and down the page depending on how much has been scrolled. I use scrollTop to return the top value of the browser's scrollbar, and set my div to that position. However, I'm getting some funny results, and my div is jumping all around the page when I scroll. Can anyone help me figure out why?

HTML

<body id="body">
    <div id="scrollBar"></div>
</body>

Javascript

$(window).mousewheel(function(turn, delta) {

  if (delta == 1) // going down

    document.getElementById("scrollBar").style.top = $("body").scrollTop() + "px";

  else //going up

  document.getElementById("scrollBar").style.top = $("body").scrollTop() + "px";

});

CSS

#scrollBar {
    position:relative;
    right:0px;
    width: 5px;
    height:30px;
    background-color:red;
    z-index:2000;
}

Thanks

Answer 1

To get what you're trying to do:

First you need to calculate the scrollbar's height. You could do this by using:

window.innerHeight * (window.innerHeight / document.body.offsetHeight)

Then use $.scroll() and put your logic inside it:

$(document).ready(function(){
    var brwserSBHeight =  window.innerHeight * (window.innerHeight / document.body.offsetHeight) +"px"
    document.getElementById("scrollBar").style.height = brwserSBHeight ; 

    $(window).on('scroll',function(e){
        document.getElementById("scrollBar").style.top = $(window).scrollTop() + "px";
       document.getElementById("scrollBar").style.top = $(window).scrollTop() + "px";

})

And, change the position:fixed in css:

Demo

Answer 2

I came up with some thing similar, but with absolute positioning:

var scrollBar = $('#scrollBar');
var jqWindow = $(window);
var jqDocument = $(document);

jqWindow.on('scroll resize load', function(e){
  var windowHeight = jqWindow.height();
  var pageHeight = jqDocument.height();
  
  if(pageHeight === 0 || pageHeight - windowHeight === 0){
    return;
  }
  
  var scroll = jqWindow.scrollTop();
  var notVisiblePageScrollRatio = scroll / (pageHeight - windowHeight);
  
  var scrollBarHeight = windowHeight * (windowHeight / pageHeight);
  var scrollBarPosition = (pageHeight - scrollBarHeight) * notVisiblePageScrollRatio;
  scrollBar.height(scrollBarHeight);
  scrollBar.css('top', scrollBarPosition);
});

html, body {
  margin: 0;
}

#scrollBar {
  position: absolute;
  top: 0; /*calculated by js*/
  right: 100px;
  width: 30px;
  height: 0; /*calculated by js*/
  background: #000;
}

#scrollBar:before {
  content: ' ';
  display: block;
  position: absolute;
  height: 1px;
  left: 0;
  right: 0;
  top: 0;
  background: #FF0;
}

#scrollBar:after {
  content: ' ';
  display: block;
  position: absolute;
  height: 1px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FF0;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="scrollBar"></div>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
    Some content 1<br/>Some content 2<br/>Some content 3<br/>
  </body>
</html>

I was also thinking about checking for pageHeight be less than window height so you can hide you'r scrollbar when it is not needed, but I had some troubles with resize event not firing up past certain window height, so it was clunky and last reported heights of window and page were different one or two, when at the end they were at least equal, I was checking it by setting interval that was reporting those heights. So I don't include that functionality here, but I think it is something that may come handy.

Issues with very basic scrollbar not acting as expected

2 个答案: