Make Beautiful Sticky Nag Screen use jQuery

Lama tidak menyentuh dunia blog, ternyata sudah baru semua :)) Biasa Beben Koben si Bloglang anu Ganteng Kalem Tea melancong dulu ke kota Medan kampung Musam tempat Nenek awak :D
Pemanasan memosting lagi deh, walau tidak ada bahannya juga :P Mengambil tema post mengenai jQuery Sticky. Master Taufik Nurrohman pernah membahas tema ini pada artikel berjudul StickyBar JQuery Plugin. Seperi itu kira-kira tutorial pemanasan mosting :P Teranyar tentang issue sticky jQuery datang dari master Trevor Davis with title posted jQuery Stick ‘em: Make Content Sticky on Scroll, to a Point
Jika sobat berminat melihat koleksi jQuery sticky scroll plugins keren punya dapat membaca di halaman 8 Cool jQuery Sticky Scroll Plugins

Tetapi sebagai seorang bloglang jika menampilkan sticky yang itu-itu juga terlihat monoton :D Bagaimana dengan model seperti berikut Beautiful Nag Screen using JQuery & CSS3 Mari kita bahas beautiful sticky nag screen use jquery ;))

var flag = 0
$(document).ready(function() {
    var nagTop = $('#nag_screen').position().top + 2
    $(window).scroll(function(e){
    if($('#nag_screen').length>0){
        var container = $(e.target);
        var top = container.scrollTop();
        if(top >= nagTop){
            if(flag==0){
                fixNag();
                flag = 1;
            }
        }else{
            if(flag==1){
                normalNag();
                flag = 0;
            }
        }
    }
    })
    
    $('a.aClose').bind("click", function(e){
        e.preventDefault();
        var node = $(e.target);
        if($('#nag_parent').length)
            $('#nag_parent').fadeOut(200,function() {
              $('#nag_parent').remove();
            });
        else
            $('#nag_screen').fadeOut(200,function() {
              $('#nag_screen').remove();
            });
    });
});

function fixNag(){
    if(!$('#nag_parent').length){
        $('#nag_screen').wrap('<div id="nag_parent"></div>');
        $('#nag_parent').css({
            'width':$('#nag_screen').outerWidth(),
            'height':$('#nag_screen').outerHeight()
        })
    }
    $('#nag_screen').css({
        'position':'fixed',
        'border-top':'1px',
        'top': 0,
        'left':$('#container').position().left,
        'width':$('#container').outerWidth()
    });
    $('#nag_screen').animate({
        'width': document.body.offsetWidth - 34,
        'left': 0
    },200);
}

function normalNag(){
    $('#nag_screen').animate({
        'left':$('#container').position().left,
        'width':$('#container').outerWidth() - 32
    },200, function() {
        $('#nag_screen').css({
            'position':'relative',
            'border-top-width':1,
            'left':0
        });
    });
}

KODE CSS

.nag_screen {
position: relative;
line-height: 1.3;
border-radius: 5px;
padding: 10px 10px 10px 20px;
border: 1px solid #FFCC33;
font-family: Arial, Georgia, Sans-Serif;
font-size: 13px;
box-shadow: 1px 1px 4px #555;
background: #FEFFBF;
}
.nag_screen p {
margin: 5px;
}
.closeBtn {
top:;
right:;
float: right;
position: relative;
}
#container {
width: 960px;
margin: 0px auto;
}
#container {
font-family: Arial, Georgia, Sans-Serif;
font-size: 12px;
line-height: 1.6;
}

MARKUP HTML<div id='container'>

BLAH BLEH BLOH

<div class='nag_screen' id='nag_screen'>

<a class='aClose' href='#'>
<img src='http://blogger.com/img/close.png' alt='X' class='closeBtn' />
</a>

</div>

BLAH BLEH BLOH

</div>Hal-hal yg perlu diperhatikan yaitu:
#container
Merupakan daerah utama yg biasa pada template blogger diberi nama wrapper, outer-wrapper, main-wrapper atau lainnya.
Pada script sticky jquery plugin jangan lupa juga dirubah jika kalian mau meng-customizenya ;) Good luck :)
http://mojotech.github.com/stickymojo/
http://gazpo.com/downloads/tutorials/jquery/sticky-header/
Happy sticky \m/