Hold an Element in Place While Scrolling

I’ve been building lead capture pages lately.  They typically have a logo at the top, some header text, an explanation of the valuable things a person can get free for signing up, a sign-up form and a footer.  It’s pretty simple.  See, for example, historicalexploration.com.  In some cases, however,  I need to be more verbose in describing the benefits of giving up an email address.  When someone scrolls down the page, the sign-up form disappears.  One solution, used a lot, is to embed the form multiple times in the discussion.  Rather than cluttering up the narrative that way,  I wanted to keep the block in position to the right of the text and slide up and down as the user scrolls.

Being as brilliant as you,  I did a search to discover the way to do this, rather than trying to figure it out myself.  I found some ways of doing it with javascript.  The best I found was a script called stickyfloat by Yair Even-Or at DroptheBit.com.  Unfortunately I couldn’t get it to work for me.  I even stripped the stickyfloat demo to its bare bones, which worked, then built my page on those bones and it wouldn’t work.  I’m pretty sure it had something to do with the way I styled the div’s but after spending too much time on it,  I decided I could accomplish the same thing with CSS.  So I figured it out for myself.

It’s really easy to fix a div in position relative to the browser window, but I needed it fixed, left and right, relative to a div within my page framework.  The example I developed is at globalcreations.com/fixeddivdemo.html.  I put all the styles inside the html so you can easily see what’s going on by looking at the page source code.  Between the info on the demo page and the source code, you can get the idea, but here’s a little more discussion.

The page has a logo, header, wrapper and footer in that order, all of a fixed width.    Inside the wrapper, I have the two columns, <div id=”leftcolumn”> and <div id=”rightcolumn”> floating left and right.  Within the rightcolumn is <div class=”fixedblock”>.

The key to all this is that first, rightcolumn is a fixed width, and second, fixedblock has the attribute ‘position: fixed.’  Now, normally, ‘position: fixed’ is supposed to fix the position of an element relative to the browser window.  However,  when it is used inside a container with a fixed width,  it will be positioned relative to the container, at least relative to the top, left and right.

The method has been tested on  Safari, Chrome and Firefox (Mac); Internet Explorer, Firefox and Chrome (Windows); and iOS 7 and it works fine.  The only issue, that I consider of no consequence in this application, is that the fixed box will slide over the footer that is positioned beneath rightcolumn if the browser window is not entirely open.  It doesn’t respect the boundaries of rightcolumn or other containers because the fixed position puts it outside the page flow except with regard to the left/right positioning within rightcolumn.

I no longer have a capture page operational that uses this technique.