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

[noid]

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

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

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

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

[ksa]

желательно, чтобы fixed не относительно родителя, а относительно всего документа

Тут "желательно" не подходит, ибо!

fixed
По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.

http://htmlbook.ru/css/position

[Margarita]

http://jsfiddle.net/fS5cZ/6/

[noid]

http://jsfiddle.net/fS5cZ/6/

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

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

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

[noid]

Нарыл скрипт простенький, с куками, только кнопка после обновления не запоминает свой 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?

[Your]

addClass()
removeClass()

[noid]

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