Search code examples
jqueryhtmlcssfixed

Moving the body with fixed elements

If I animate the body of my document

$('body').animate({'margin-left': '500px'});

All of my fixed elements won't move:

.box {
    position: fixed;
    top: 50%;
    left: 0;
    background: red;
    height: 100px;
    width: 100px;
}

If I want everything in my document to move, will I need to move fixed elements independently of the body, or is there a way I can make the elements fixed to the body?

Solution

  • That's how fixed positioned elements work - they are positioned relative to the viewport.

    See the CSS 2.1 specification:

    Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport. For continuous media, fixed boxes do not move when the document is scrolled. In this respect, they are similar to fixed background images.

    You might animate left or margin-left properties of the the fixed elements too.