Keep an element fixed within a container during window scroll

jquery scroll sticky
jkilp picture jkilp · Feb 9, 2012 · Viewed 12.5k times · Source

I have a question that I think will be best explained using an image, so I am going to attach it.

enter image description here

Ok, so basically what I have is a parent container, and an element inside it (it will actually be a block of text), which we will refer to as the FIXED element.

When the user is at the top of page, I want the fixed element to be at the top of its parent. When the user starts scrolling down the page, and the parent starts moving up the view port, I want the fixed element to follow the scrolling until it reaches the bottom of its parent, then it stops there.

There currently is no HTML or anything for this yet, because I'm in the rough sketching stage of this website.

I am open to using jQuery or javascript in general, my JS skills are limited, and I am familiar with jQuery, but I don't mind copying and pasting code and messing with it.

Any help will be greatly appreciated. Thanks!

Answer

thenetimp picture thenetimp · Feb 9, 2012

What you want to do using javascript (with or without jQuery) is change the position of the element absolutely against the position of the parent, the parent should be relative. You change the position based on the position of the scrollbar.

This tutorial has a good explanation of how to accomplish that.

http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/

Related questions

jQuery - DIV to move with scrolling motion and stick position to top and bottom of window

There may be already a jQuery plugin which can achieve this, but I can't find one to do exactly what I'm after. If there is, just point me to the tutorial, thanks. My problem I have is that I have …

Read More
Make content sticky on scroll to a point in jQuery

I have a div that's set to position: relative. It becomes fixed when the top of the window reaches it. The div lives in a container (blue in the example below) and I would like to set it back to …

Read More
jQuery scroll to element

I have this input element: <input type="text" class="textfield" value="" id="subject" name="subject"> Then I have some other elements, like other text inputs, textareas, etc. When the user clicks on that input with #subject, the page …

Read More