Sticky Situation

[Harun]

What I am working on is a page that consists of a Content Area and a Footer. The Content area also hosts a Action panel that needs to stick to bottom of the browser window (not the page). When you have scrolled all the way to the end of the page the Actions panel sits on top of the Footer

Here a visual of what i am talking about.

I also forked Chris’ Pen which shows the footer behavior already solved.

Appreciate any help I can get… Thanks!

[Alen]

Something like this: http://codepen.io/alenabdula/pen/ptsqg

[Harun]

yes!!
it kinda flickers and jumps at the end… (but i can live with that for now)

Thanks so much…

[Harun]

yes!!
it kinda flickers and jumps at the end… (but i can live with that for now)

Thanks so much…

[Alen]

The flickering is due to the fact that you are applying fixed positioning, taking the element out of document flow. So the element height is not incorporated when calculating document height. When we take the fixed positioning off, element goes back into the document flow increasing the height; essentially moving the scroll position. Once that happens our else statement evaluates to true (not what we want) making the element go back to fixed position (flicking… or up/down scroll bar).

Solution I came up with is to: get height of fixed element, apply it as padding to wrapping element (adding the excluded height), once the if statement evaluates to true, I remove the padding.

Code can probably be improved. And I bet there’s even better solution. JavaScript is not my forte. Maybe @CrocoDillon can help?

[Author]

Posts