Jump to content

Making A Div Follow Along As You Scroll The Page?


Morgan
 Share

Recommended Posts

Hi there,Ok so here is the functionality I want to accomplish, and it is probably relatively easy, I just can't seem to find the right information:I have a BIO page I am working on, with a <div> floating to the left displaying all the pictures of the people, and a <div> floating to the right with the BIO's for those people.I am using a Collapsible DIV Javascript so that when you click an image on the left side of the page, it displays a div WITHIN the right floating DIV, which displays all the BIO info for that specific person. When you click another image, the original DIV goes back to being hidden, and the new DIV for the new BIO is displayed in its place. My problem is, there are many BIO images on the left, and as such, if you scroll down too far on the page, you have lost the BIO (it is still at the top of the page).I want to make it so that the <div> that is floating right (the one that hosts all the many hidden BIO divs), will scroll the page with you, so that it is always visible on the right side of the page (rather than being absolutely at the top at all times)is this possible? I believe it is, as I have seen it done with images in my time, but I can't seem to find the right functions to accomplish it.I hope I was clear enough, please let me know if I wasn't, and thanks to anyone who can help me out :) Cheers- Morgan

Link to comment
Share on other sites

Hi there,Ok so here is the functionality I want to accomplish, and it is probably relatively easy, I just can't seem to find the right information:I have a BIO page I am working on, with a <div> floating to the left displaying all the pictures of the people, and a <div> floating to the right with the BIO's for those people.I am using a Collapsible DIV Javascript so that when you click an image on the left side of the page, it displays a div WITHIN the right floating DIV, which displays all the BIO info for that specific person. When you click another image, the original DIV goes back to being hidden, and the new DIV for the new BIO is displayed in its place. My problem is, there are many BIO images on the left, and as such, if you scroll down too far on the page, you have lost the BIO (it is still at the top of the page).I want to make it so that the <div> that is floating right (the one that hosts all the many hidden BIO divs), will scroll the page with you, so that it is always visible on the right side of the page (rather than being absolutely at the top at all times)is this possible? I believe it is, as I have seen it done with images in my time, but I can't seem to find the right functions to accomplish it.I hope I was clear enough, please let me know if I wasn't, and thanks to anyone who can help me out :) Cheers- Morgan
you can use position:fixed so the right hand side box scrolls down the page, in effect it is always positioned relative to the browser window.
Link to comment
Share on other sites

Hi all, thanks for your replies :)I have another query however:I am using the following to push the div I want to follow the page over to the right:div.bioright {float: right}when I add this:div#bioright {position: fixed}* html #bioright {position: absolute}and add an ID next to the CLASS on the Right Side <div>, it does as intended, however it forces everything over to the left - seemingly bypassing the fact that I have it set to float: right (thereby, overlapping all my images on the left side).I tried simply adding position: fixed to the end of the class rather than creating a new ID, but that gave the same resultHow can I get it to follow the page (like fixed would do) but remain floated to the right side of the page itself?Thanks!Edit: Figured out a way around this, I just wrapped all the divs that I wanted to stay on the right side of the page (but move with the page) within another div, and floated the main div wrapper to the right. I am still curious if there is another easier (or more correct) way to do this than what I have done, so please post your knowledge :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...