Auto positioning div as one scrolls the page down/up

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

请不要使用jQuery; 它是纯CSS.

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

通过调整top和调整您喜欢的确切位置left.也许你希望它像图像一样垂直居中(如果草图在那个方面是准确的),在这种情况下你必须处理垂直居中所需的所有有趣技巧 ; 希望在你的情况下这样的事情会起作用:

#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. */
}