Fixed Float Demo

← Back to Web Wednesday

Here's a demo on how a floating sidebar item could work. The issue becomes more than just whether the top can be prevented from scrolling off the page. What if the box is too tall to fit on the page? What if you want it to stop when you get to the bottom?

This attempts to solve both problems. Try scrolling the page up and down and see how it works (currently only supported on wider widths, so mobile users are out of luck).

This is based on this demo from HTML5 Trends, but modified to use native positioning by setting "static," "fixed," or "absolute" based on various criteria. At no time is JavaScript used to position the element as scrolling is happening, which keeps the feel of the scrolling very smooth and avoids the choppiness that can result from animating the position of the element with JavaScript.

This could be improved further:

  • Make it responsive (just get rid of the functionality entirely for smaller screen widths).

Here's a link to the JS file: fixedfloat.js. In this case, the "fixfloat" element has class "fixfloat" and the "stop" element has class "bottom". You can change these by just updating the appropriate selectors and classes.

Now, to make the page longer here's some filler text.

Some Lebowski Ipsum

Lebowski ipsum stay out of Malibu, deadbeat! Dolor sit amet, consectetur adipiscing elit praesent ac magna justo pellentesque ac lectus quis. Elit blandit fringilla a ut turpis praesent felis ligula, malesuada suscipit malesuada non, ultrices. Is this your homework, Larry? I know my rights. Non urna sed orci ipsum, placerat id condimentum rutrum, rhoncus ac lorem aliquam placerat. If the plan gets too complex something always goes wrong. If there's one thing I learned in Nam—. Posuere neque, at dignissim magna ullamcorper in aliquam sagittis massa ac tortor ultrices faucibus.

Curabitur eu mi sapien

Curabitur eu mi sapien, ut ultricies ipsum morbi eget risus nulla. And I'm talkin' about the Dude here —sometimes there's a man who, wal, he's the man for his time'n place, he fits right in there—and that's the Dude, in Los Angeles. Nullam vel nisi enim, vel auctor ante morbi id urna vel. Your goons'll be able to get it off him, mean he's only fifteen and he's flunking social studies. So if you'll just write me a check for my ten per cent… of half a million… fifty grand.

And so, Theodore Donald Karabotsos, in accordance with what we think your dying wishes might well have been, we commit your mortal remains to the bosom of the Pacific Ocean, which you loved so well. Felis lacinia placerat vestibulum turpis nulla, viverra nec volutpat ac, ornare. Id lectus cras pharetra faucibus tristique nullam non accumsan justo nulla. Now this story I'm about to unfold took place back in the early nineties —just about the time of our conflict with Sad'm and the Eye-rackies. I only mention it 'cause some- times there's a man—I won't say a hee-ro, 'cause what's a hee-ro?—but sometimes there's a man.

Zere ARE no ROOLZ!

Zere ARE no ROOLZ! Facilisi integer interdum elementum. Excuse me! Mark it zero. Next frame. Nulla, nec eleifend nisl. JUST BECAUSE WE'RE BEREAVED DOESN'T MEAN WE'RE SAPS! Euismod ac maecenas vitae. Eros velit, eu suscipit. Mr. Lebowski asked me to repeat that: Her life is in your hands. Erat integer purus lacus, Mind if I smoke a jay? Pretium vel venenatis eu, This kid is in the ninth grade, Dude, and his father is—are you ready for this? —Arthur Digby Sellers.

Your "revolution" is over, Mr. Lebowski! Condolences! The bums lost! Volutpat non erat donec a metus. Ac eros dictum aliquet nulla consectetur. Lady, I got buddies who died face-down in the mud so you and I could enjoy this family restaurant! Egestas placerat maecenas pulvinar nisl et. I—the royal we, man, you know, the editorial. Please see him, Jeffrey. He's a good man. And thorough. Nisl rhoncus at volutpat felis blandit.

Some Lebowski Ipsum

Lebowski ipsum stay out of Malibu, deadbeat! Dolor sit amet, consectetur adipiscing elit praesent ac magna justo pellentesque ac lectus quis. Elit blandit fringilla a ut turpis praesent felis ligula, malesuada suscipit malesuada non, ultrices. Is this your homework, Larry? I know my rights. Non urna sed orci ipsum, placerat id condimentum rutrum, rhoncus ac lorem aliquam placerat. If the plan gets too complex something always goes wrong. If there's one thing I learned in Nam—. Posuere neque, at dignissim magna ullamcorper in aliquam sagittis massa ac tortor ultrices faucibus.

Curabitur eu mi sapien

Curabitur eu mi sapien, ut ultricies ipsum morbi eget risus nulla. And I'm talkin' about the Dude here —sometimes there's a man who, wal, he's the man for his time'n place, he fits right in there—and that's the Dude, in Los Angeles. Nullam vel nisi enim, vel auctor ante morbi id urna vel. Your goons'll be able to get it off him, mean he's only fifteen and he's flunking social studies. So if you'll just write me a check for my ten per cent… of half a million… fifty grand.

And so, Theodore Donald Karabotsos, in accordance with what we think your dying wishes might well have been, we commit your mortal remains to the bosom of the Pacific Ocean, which you loved so well. Felis lacinia placerat vestibulum turpis nulla, viverra nec volutpat ac, ornare. Id lectus cras pharetra faucibus tristique nullam non accumsan justo nulla. Now this story I'm about to unfold took place back in the early nineties —just about the time of our conflict with Sad'm and the Eye-rackies. I only mention it 'cause some- times there's a man—I won't say a hee-ro, 'cause what's a hee-ro?—but sometimes there's a man.

Zere ARE no ROOLZ!

Zere ARE no ROOLZ! Facilisi integer interdum elementum. Excuse me! Mark it zero. Next frame. Nulla, nec eleifend nisl. JUST BECAUSE WE'RE BEREAVED DOESN'T MEAN WE'RE SAPS! Euismod ac maecenas vitae. Eros velit, eu suscipit. Mr. Lebowski asked me to repeat that: Her life is in your hands. Erat integer purus lacus, Mind if I smoke a jay? Pretium vel venenatis eu, This kid is in the ninth grade, Dude, and his father is—are you ready for this? —Arthur Digby Sellers.

Your "revolution" is over, Mr. Lebowski! Condolences! The bums lost! Volutpat non erat donec a metus. Ac eros dictum aliquet nulla consectetur. Lady, I got buddies who died face-down in the mud so you and I could enjoy this family restaurant! Egestas placerat maecenas pulvinar nisl et. I—the royal we, man, you know, the editorial. Please see him, Jeffrey. He's a good man. And thorough. Nisl rhoncus at volutpat felis blandit.

A "Fixed Floater"

This element should stay in view as the page is scrolled, but only in a given range. If it's too long for the page, you can always scroll the whole page down. When it reaches the bottom, it will get scrolled up into view.

It also uses CSS positioning, which makes scrolling smoother than using JavaScript.

 

Some Lebowski Ipsum

Lebowski ipsum stay out of Malibu, deadbeat! Dolor sit amet, consectetur adipiscing elit praesent ac magna justo pellentesque ac lectus quis. Elit blandit fringilla a ut turpis praesent felis ligula, malesuada suscipit malesuada non, ultrices. Is this your homework, Larry? I know my rights.

This is a footer, dude. It acts as a stop, so the side fixed/floating thing doesn't go past this. It also allows a very tall fixed/float widget to be scrolled up into the viewport.

To see how this works, here's yet more placeholder text.

 

Curabitur eu mi sapien

Curabitur eu mi sapien, ut ultricies ipsum morbi eget risus nulla. And I'm talkin' about the Dude here —sometimes there's a man who, wal, he's the man for his time'n place, he fits right in there—and that's the Dude, in Los Angeles. Nullam vel nisi enim, vel auctor ante morbi id urna vel. Your goons'll be able to get it off him, mean he's only fifteen and he's flunking social studies. So if you'll just write me a check for my ten per cent… of half a million… fifty grand.

And so, Theodore Donald Karabotsos, in accordance with what we think your dying wishes might well have been, we commit your mortal remains to the bosom of the Pacific Ocean, which you loved so well. Felis lacinia placerat vestibulum turpis nulla, viverra nec volutpat ac, ornare. Id lectus cras pharetra faucibus tristique nullam non accumsan justo nulla. Now this story I'm about to unfold took place back in the early nineties —just about the time of our conflict with Sad'm and the Eye-rackies. I only mention it 'cause some- times there's a man—I won't say a hee-ro, 'cause what's a hee-ro?—but sometimes there's a man.