Floating Section Scrolls with Page (HTML & JS)

I had the need yesterday to make a section or block of HTML scroll with the page. I wanted it to stay in a spot on the page, relative to all else, until the visitor scrolled the page down. Then I wanted it to stay at the top of the page, never scrolling off the page. It was to be a section (eg, a navigation bar or image) that essentially had an initial "parked" position in the design, but should always be visible, even when the user scrolls down. Check out the illustration to the right and an example of the code in use.

I've seen different implementations of this. The most popular solution is a "chaser" where the element's absolute position is updated dynamically after each page scroll event. You have probably seen sites like this. They are a bit annoying and clunky - the element is constantly hiding and showing after every scroll.

After no luck finding a solution that I liked, I created one. It is below for your enjoyment. It uses jQuery to make things easier (ie, this framework is required). Take, use and be merry.

AND, the javascript:

$(function() {
 
 window.floater = {};
 
 /* Settings */
 window.floater.element = $('#float'); // Element to float
 window.floater.topMargin = 20; // Margin from top of window
 
 /* Global Vars & Initial Position */
 window.floater.captured = false;
 window.floater.posi = window.floater.element.offset();
 window.floater.marginLeft = parseInt(window.floater.element.css('margin-left').replace('px', ''), 10);
 
 $(window).scroll(function() {
  var curScroll = {
   top: $(window).scrollTop(),
   left: $(window).scrollLeft()
  };
  
  if (curScroll.top >= (window.floater.posi.top - window.floater.topMargin)) {
   
   if (!window.floater.captured) {
    window.floater.captured = true;
    var scrollAtTrigger = curScroll.top;
    if ((window.floater.posi.top - scrollAtTrigger) < window.floater.topMargin) scrollAtTrigger = window.floater.posi.top - window.floater.topMargin;
   }
   
   window.floater.element
    .css({
     position: 'fixed',
     top: (window.floater.posi.top - scrollAtTrigger)+'px',
     left: (window.floater.posi.left - window.floater.marginLeft - curScroll.left)+'px'
    });
    
  } else {
   
   window.floater.captured = false;
   window.floater.element.css({ position: 'static' });
   
  }
 });
 
 $(window).resize(function() {
  var posiFix = window.floater.element.css({position: 'static'}).offset();
  window.floater.element.css({position: 'fixed'});
  window.floater.posi.left = posiFix.left;
  $(window).scroll();
 });
 
});

The nuts and bolts: Put the float wherever you'd like it to be on the page initially. Then, when the document is loaded, the JavaScript goes to work. It sets up two events: one page-scroll event and one page-resize event. This is where the hard work is done. Once the page scrolls past a certain point, the position of the floater is set to fixed which means it remains a certain position relative to the window or viewport. There is no flickering or chasing using this method. It is clean and smooth.

Note: The floater's initial CSS position must be set as 'static' (which is a CSS default if it is undeclared). If you need to set it to 'relative' or 'absolute', use a wrapper to position it.

Note 2: I've noticed on Firefox 6.0 that there is a weird bug (?) that causes iframes to refresh if their positioning switches from 'static' to 'fixed'. So, if you plan on playing a YouTube video in your floater, beware: it my refresh and reset your video on scroll.

Lyrics - Beautifully Displayed

A friend and I decided the world needed a lyric site that looked good and didn't bombard you with ads. We put together Lyric Garden for this purpose. We're only starting with a few songs to see how things go. Check it out.

Turn your iPod Touch into a Phone

This was kind of a fun little project, so I thought I'd share. Just a heads up, before you get too far along, this is not free. I know Google is in the habit of giving away things like free phone calls, but this stuff (like making real phone calls) generally costs money.

First, you'll need an app for that. I downloaded the Bria VoIP SIP phone app. (It is also available for the iPad.) This handy little app turns your iPod touch (or iPad) into a VoIP phone -- in other words, you can make phone calls over WiFi or a data connection.

Next, you'll need a phone number (also called a DID). There are a lot of service providers out there but I've used Flowroute, a company with servers in the southeast, for my interconnect. They charge about 1 cent per minute for calls to anywhere in the US plus $1.40 a month for the number. Needless to say, you can make a lot of long distance calls on the cheap.

Lastly, you'll need to configure your Bria app to work with Flowroute. To do this, log into Flowroute and click on the "interconnection" tab. There you'll find the info you'll need. Then start the Bria app on your iPod and go to "settings" and click the plus sign to add a new account.

Bria Setting	Flowroute Setting
"Display as"	Your phone number (eg, "15551230000")
"Username"	Your phone number (eg, "15551230000")
"Password"	"Password"
"Domain"	"SIP Registrar / Proxy"
"Out. Proxy"	"SIP Registrar / Proxy"
"Auth Name"	"Username & Auth Username"

And that is it. Easy peasy. Click "Register" and your portable Apple device is a VoIP phone and you can make reliable, clear phone calls on the cheap. (Note: You'll need a pair of headphones that have a mic built in, like the headphones that come with the newer iPods.)