Floating Element that Scrolls with a Page

I occasionally have a need to show a note or message to a user that must remain in vision. When the page is scrolled vertically the message moves with the content. I usually want the message in the center of the window, to the right of my content. The movement must be fluid and responsive, not choppy like back in the early days. This can be accomplished with little effort:

We must add the markup that will be moved around. Of course, you can expand upon this however you see fit:
Now, with some CSS we style the element and set it’s position:
This will position the element at the middle, far-right of the page. Of course, this may look a little spaced-out if you have a high resolution. This bit of script will snug it up next to whatever element you wish:
This code does some adjustment based on resolution. It compares the browser’s viewport width to the space required to show your message next to the target element. If it exceeds then the message will just ride the right of your page, hovering any content it passes while scrolling. If it fits then it will be nestled next to it.

See a DEMO.