jQuery.offset() sets position: absolute. I need position: fixed

Question

When you set an element's offset with jQuery.offset({coords}) it also sets the CSS property position to absolute.

I have a div, however, that I set to position: fixed in my CSS, and I want it to remain that way, even after setting the offset of the element with jQuery.

Now, I'm sure I can probably set the offset, then set position: fixed again, but I was wondering if there is a way I can tell jQuery to set the position to fixed instead of absolute when it sets offset.

HTML

<div class="searchResults">
    ...
</div>

CSS

DIV.searchResults {
    position: fixed;
    padding: 20px;
    background-color: red;
    z-index: 501;
}

jQuery

$("DIV.searchResults").offset({left: 0, top: 0});

Rendered HTML

<div class="searchResults" style="position: absolute; top: 0px; left: 0px;">
    ...
</div>

Obviously, since jQuery is setting the position in the style, it will trump the value of my CSS class. So I need a way to tell jQuery to set position to fixed instead of absolute, or tell it to set the offset without setting the value of the CSS property position.

Answer 1

As I commented above, in your case all you need is to modify the CSS for top and left like this:

$("DIV.searchResults").css({left: 0, top: 0});

Because the $.offset setter method only manipulates the left, top and position values to make the element relative to the page (from static to relative, and from fixed to absolute). Since you want it position fixed, set the values directly.

Answer 2

Maybe not that elegant, but I think you can just chain .css() after that to be sure that position is set to fixed like this:

jquery

$("DIV.searchResults").offset({
    left: 0, 
    top: 0
}).css("position" : "fixed");

Not tested, but I think that'll work.