Смена класса блока по нажатию на кнопку
 

Хочется на jquery. Задача такая:

Миничат в левой колонке сайта, по нажатию на кнопку "зафиксировать" меняет position:relative и становится fixed, при чем желательно, чтобы fixed не относительно родителя, а относительно всего документа. И таким образом прилипает к верхней части экрана. Кнопка меняется на "открепить" и по её нажатию блок возвращается в первоначальное положение. И куки не помешают, чтобы при обновлении не обнулялось.

Нужна именно смена стиля, т.к. блоки сворачиваемые, и если чат не прикреплен, то при его сворачивании блоки под ним естественно подтягиваются. А когда он фиксед, то он вообще оттуда уходит и блоки нижние занимают его место. Ну и неплохо было бы все это плавненько.

Спасибо за помощь.:)

Тут "желательно" не подходит, ибо!
http://htmlbook.ru/css/position

Спасибо, в принципе оно. Но я уже битый час бьюсь, что-то не срабатывает http://memkey.net/chat/d.html и оригинал тоже http://memkey.net/chat/a.html. Не меняется click.

И, если можно, прикрутить бы куки. У меня и так уже используется jquery.cookie.js

И плавный переход бы от fixed к нормальному состоянию. Animate наверное, да?

Нарыл скрипт простенький, с куками, только кнопка после обновления не запоминает свой value, как поправить? http://memkey.net/chat/b.html

<script> 
$(document).ready(function() {
    var box_class = $.cookie('box_class');
    if(box_class) {
        $('div#box').attr('class', box_class);
    }
    $("#run").click(function() {
        $("div#box").toggleClass("block");
        $.cookie('box_class', $('div#box').attr('class'));
    });
});
</script>

<div style="width:800px;" id="content">
    <div style="float:left; width:800px; height:300px; background:#99CCCC">Хэдэр</div>
    
    <div style="float:left; width:400px;">
        <!--start_chat-->   
        <div id="box" class="blockoff">Чат<br /><br /><br />
            <input type="button" id="run" value="прикрепить" onClick="this.value=this.value=='прикрепить'?'отлепить':'прикрепить';">
        </div>
        <!--end_chat-->      
        <div><img src="img2.jpg" /></div> 
    </div>

    <div style="float:right; width:400px;">    
        <div><img src="img1.jpg" /></div>
    </div>
</div>

И вопрос с плавным переходом остаётся на повестке дня. Может через какой-нибудь fadein/fadeout?

addClass()
removeClass()

Всем спасибо, вариант от Margarita забрал.