Comments on: Fixed Floating Elements

By: Johan van de Merwe

Johan van de Merwe — Wed, 14 Apr 2010 20:44:10 +0000

Great work! Am putting it into a site I am working on and it is soooooooooooooooo smooth. Thank you!

JJ from Bad Salzuflen, Germany

By: Ricardo

Ricardo — Mon, 29 Mar 2010 15:19:39 +0000

Like Jason wrote before, i have a question, what if the floating element is bigger than the viewport?, well, maybe there can be a easy possible solution for this, but anyways, my real question is: what if the viewport is not very big OR what if there is a footer in the end? Is there any ways to make the floating element change state when its near the en of its container. In Apple’s page when you get to the end of the page, the floating element changes it state and stops floating. I dont know if you can understand, but if you go to the Apple store, and make the viewport smaller you can see what I mean. Please any help would be very appreciated.

By: Golioth

Golioth — Tue, 23 Mar 2010 16:17:11 +0000

How about creating something James Wong, and earlier Thorsten too, suggested: switch the box from fixed back to an absolute position on reaching the bottom of a page or the top of the next element, for example a footer.

Anybody know how to achieve this? Like when reaching a given height from the bottom of the page.

By: Jason

Jason — Thu, 11 Mar 2010 07:32:56 +0000

Oh, quick fix just popped into my head after I looked at Apple’s. If the height of the floating element is taller (will need to be rechecked upon any client or ajax changes or browser resize) than the browser window width, just don’t apply the effect. Handling it better will take more time and feel free to implement it for me, anyone. :)

By: Jason

Jason — Thu, 11 Mar 2010 07:27:00 +0000

Hmm, only problem is if the contents of that floating elements are longer than the height of the browser window, there is no way to ever get to the bottom of the floating element. Open it in a new window, make the browser 200px tall or something and then the button is not possible to get to. So this will be a problem on phones, etc. Should be some way to add this functionality, but I’ll look into it when it becomes a priority. Ah, looking at Apple’s just gave me the quick fix idea of if the floating element height is at any point larger than the browser height at that time, just don’t apply the effect. If anyone wants to come up with the better solution of having it scroll to the bottom of the too tall floating contents and then stop the effect (until it goes back up), that would be sweet.

By: Martin Berglund

Martin Berglund — Sun, 07 Mar 2010 16:12:59 +0000

I have noticed what I think is a browser related bug… :-/

If the technique in this tutorial is used on a fixed width, centered layout, the fixed element will not stay in its x-position when the browser window is resized. In the Apple Store it seems like Apple have found a solution that does not break when resizing the browser window.

Firefox plays nice, but Safari is not as cool about this. If ‘position: fixed’ is not added through jQuery, Safari plays nice too.

I am terrible at describing code and website behaviour, but I hope you understand what I am trying to explain.

You can see a demo of the bug here (centered, fixed width): http://jsbin.com/aqeji

By: Zander

Zander — Wed, 03 Mar 2010 11:26:46 +0000

This is brilliant! I used it recently on the Prometheus Bound Books website, but I am building a new site and would really like to have the same functionality for horizontal scrolling rather than vertical. Can this be done?

Many thanks Remy for creating this tuorial and all the others.

By: eriadam

eriadam — Fri, 19 Feb 2010 11:30:43 +0000

Hi Remy, thanks for the j4d podcast, I love it! I just discovered that in Firefox 3.6 (only Windows) the scroll event is not being triggered while I'm actually scrolling, just only when I release the sidebar or slow the scrolling down. The y variable looks like this:
y = 0
y = 312
y = 772
y = 954
y = 958
And as it is not continuous (like 5-6 step at the time) it is jumping. Mouse wheel scrolling is the same: while the page is moving, the event is not triggered. Do you have any idea how to fix this?

By: John-David Dalton

John-David Dalton — Tue, 26 Jan 2010 16:22:59 +0000

The whole parseFloat($('#comment').css('margin-top').replace(...)) is way to over complicated. NaN values will convert to boolean false so this will work parseFloat($('#comment').css('margin-top')) || 0;.

By: Nicolas Chevallier

Nicolas Chevallier — Wed, 06 Jan 2010 18:23:35 +0000

Thanks for this piece of code. I add this to my toolbox for the project I work on. It’s simple but I never see a smooth scroll like yours, without any flickering problem.