Divs that Move When Users Scroll
================================
:author: Aaron Ball
:email: nullspoon@iohq.net


Today I was working on a project that has a search box at the top of the page
in the primary nav bar that I thought would be nice if it stayed put when
scrolling through the hundreds of lines of data on the page. I thought, 'Moving
elements on a page must entail javascript, right?'.

Wrong


[[with-javascript]]
With Javascript
---------------

But alas, I started down the JavaScript path anyways. So I can cut to
the chase a bit sooner, I'll just paste the function I wrote so those of
you  out there who want to use Javascript can.

  function setScrollable(ScrollObject) {
    ScrollObject.style.top=window.pageYOffset+'px';
    ScrollObject.style.left=window.pageXOffset+'px';
  }

To use that function, you need several things. First, you need the onscroll
event in your body tag.

  <body onscroll="setScrollable(document.getElementById('ScrollDiv'));">

Finally, you need one thing set in your styles (perhaps two, depending on if
you're using z-values)...

  div#ScrollDiv {
   position:absolute;
   z-index:100;
  }

And presto! You've got yourself a div that moves up, down, left, and right when
your user scrolls.

You will however likely notice that when you scroll quickly, the bar flickers.
Well, it doesn't flick. It's more like it your browser doesn't process the
JavaScript fast enough for the bar to stay at the top during an onscroll event
ergo, it takes a few to catch up. I thought to myself, 'How does Google pull
this off so seamlessly with their in-browser chat windows that stay put so
nicely at the bottom right hand of your screen whilst scrolling?' (oh yes,
whilst was in that thought). After looking around for a while, it hit me that
you can use CSS to do this.


[[with-css]]
With CSS
--------

As it turns out, that fancy property we all use to keep our backgrounds
from scrolling on our pages also works with objects. To implemenet this
the CSS way, all you need to do it put in a bit of styling to position
your div (or whatever object you want stationary) and your'e set.

  div#ScrollDiv {
   position:fixed;
  }

Sweet mother, that was easy!


[role="datelastedit"]
Last edited: {docdate} {doctime}
