Jump to content

Fixed position element staying on screen


benn600

Recommended Posts

I have a div that is positioned fixed, with some IE fix CSS.  It is positioned about 150 pixels from the top and remains there as the page is scrolled.  What would be the most elegant, simplest way to have this box scroll up to the top of the browser window and then remain in place?  The problem is that this box, solid black (with select drop down contents) does not span to the top of the page so when users scroll down, the content is seen below and above the box.  The fixed box should float up to the top of the window.

 

CSS only would be preferred, obviously!  To get around the fixed position issue, I created two divs with one absolutely positioned and the other fixed.  Then, I used some body / html manipulation to clean it up and it works great in both IE & Firefox.

 

Thanks.

Link to comment
Share on other sites

you will need to use javascript to do this....

 

you will need to check the current scroll position and alter the top position value based on the scrolling of the document.

 

this is made easier by the fact that you want top = 150 when page scrolling is 0 and 0 when page scrolling is 150...

 

holla back if you need the code to do it

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.