Question

Please see this UI sketch image, I have this div in sidebar (black box) on a certain site and as I scroll down or scroll up, I don’t want it to hide…I want it to move itself down as I scroll down and move itself up as I scroll back up so that it never hides out. Can you recommend me some jQuery that can get this done? or something else. Please help, thanks.

Answer 1

Don’t use jQuery for this please; it’s pure CSS.

#MyDiv
{
    position: fixed;
    top: 10px;
    left: 10px;
}

Adjust the exact position to your liking by adjusting top and left. Maybe you want it centered vertically like in the image (if the sketch is accurate in that aspect), in which case you have to deal with all the fun tricks necessary for vertical centering; hopefully in your case something like this would work:

#MyDiv
{
    position: fixed;
    top: 50%; /* This places the _top_ of the div in the middle of the page. */
    left: 10px;
    height: 500px;
    margin-top: -250px; /* This moves the div upward by half of its height,
                           thus aligning the middle of the div with the middle
                           of the page. */
}