October 11, 201015 yr Hey there, New to the forums so this is my first post (bar my hello in the introduction section)... I have a problem with a fixed floating element I've setup curtesy of a Remy Sharp tutorial - http://jqueryfordesigners.com/fixed-floating-elements/ I'm in desperate need to get a slight modification added to it. Basically my form is slightly taller and I have a footer running along the bottom, so on smaller monitors the form overlaps the footer as it has a position:fixed property applied to it. Check it out for your selves: http://bit.ly/bRMEnU Does anyone know of a way to apply a class to a div once it's reached the bottom of it's container?? That way I can apply position:absolute bottom:0 to it so it doesn't encroach on the footer? Any help would be much appreciated!!! Cheers
October 11, 201015 yr You probably need the second type of "sticky footer" which doesn't use position: fixed. It stays at the bottom of a page which has little content above, but stays below the content if there is a lot of content and you scroll to see it. Look at http://www.cssstickyfooter.com/
October 11, 201015 yr Author Unfortunately mate I've tried that, it doesn't work. The thing is the form has position:fixed applied, so it's out of the flow of the document so the footer doesn't even know it's there. I basically have to figure out a way to apply position:bottom, and replace position:fixed, once it reaches the bottom of its containing div. I'm beginning to think it's impossible! Although Apple have done it... http://store.apple.com/uk/configure/MC511B/A?mco=MTg1ODMzNDk If you reduce the height of your browser and then scroll up and down you can see the summary and spec box fix to the bottom of the container (when at the bottom of the page). Check out the source, they use a duplicate of the summary and spec boxes that's hidden. Then when they reach the bottom the boxes that have scrolled down disappear and the one positioned at the bottom appears, giving the illusion the original boxes stop scrolling. I just can't figure out how exactly they do it... :-s
October 11, 201015 yr Unfortunately mate I've tried that, it doesn't work. The thing is the form has position:fixed applied, so it's out of the flow of the document so the footer doesn't even know it's there. I basically have to figure out a way to apply position:bottom, and replace position:fixed, once it reaches the bottom of its containing div. I'm beginning to think it's impossible! Although Apple have done it... http://store.apple.c...mco=MTg1ODMzNDk If you reduce the height of your browser and then scroll up and down you can see the summary and spec box fix to the bottom of the container (when at the bottom of the page). Check out the source, they use a duplicate of the summary and spec boxes that's hidden. Then when they reach the bottom the boxes that have scrolled down disappear and the one positioned at the bottom appears, giving the illusion the original boxes stop scrolling. I just can't figure out how exactly they do it... :-s lokks like they are using javascript
October 11, 201015 yr Author lokks like they are using javascript Yeah, that's the problem... I'm more of a designer but fluent in CSS and HTML... I know how to get jQuery plugins to do what I want, but that's about as far as my js goes. So, here I am... any ideas on how to replicate the effect??
October 11, 201015 yr have you tried putting it in a wrapper? this may be of interest, I am sure it can be set to work in your situation http://stackoverflow.com/questions/2805404/preventing-element-from-displaying-on-top-of-footer-when-using-positionfixed
October 11, 201015 yr Author Yeah, it's actually in a wrapper... although I just played with the css but no luck. overflow:hidden doesn't even hide the form when it passes beyond the wrapper. It's like the terminator or something!! :-)
October 11, 201015 yr Author this may be of interest, I am sure it can be set to work in your situation http://stackoverflow.com/questions/2805404/preventing-element-from-displaying-on-top-of-footer-when-using-positionfixed That looks good, that looks really good... will check it out. Cheers bud! Been googling my self senseless, good find!
October 13, 201015 yr "Sticky footer" which doesn't use position: fixed. It stays at the bottom of a page which has little content above, but stays below the substance if there is a lot of substance and you scroll to see it. Look at
October 16, 201015 yr unluckily mate I've tried that, it doesn't work. The thing is the form has position fixed enforced, so it's out of the flow of the document so the footnote doesn't even know it's there.
Create an account or sign in to comment