Sergei Struk
Sergei Struk

Reputation: 358

Overlapping of footer by element with fixed position

I have sidebar block, which has position fixed.
I need to fix overlapping of the footer by this sidebar when I scroll browser's window.

I tried to change the positioning of sidebar to absolute, calculate conditions of movement and move it on scroll event of window, but it does not work correctly when I scroll fast.

How can I fix this, problem when scrolling the window fast, or, suggest if there is a js plugin for this?

Update:

Fiddle : http://jsfiddle.net/c863E/1/

(Footer should not be overlapped by sidebar)

Upvotes: 3

Views: 1078

Answers (1)

Joe Spurling
Joe Spurling

Reputation: 967

I've used the following plugin for this exact task before: http://www.profilepicture.co.uk/sticky-sidebar-jquery-plugin/

It worked perfectly.

Also here is the GitHub project: https://github.com/p-m-p/jQuery-Stickybox

The general term for the solution you need is a sticky sidebar. There are various jQuery plugins and tutorials with varying techniques for achieving this effect. A Google search for "jquery sticky sidebar" will reveal plenty.

Upvotes: 2

Related Questions