Demo Beautiful Sticky Nag Screen use jQuery

by Beben Koben

HTML

<h1>Tutorial Blog for Stylish Blogger</h1>
    <div id='container'>
Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te duo, at per sonet detraxit evertitur. No nonumy percipit voluptatum vel, alii erant mediocritatem sed at. Brute aeque deseruisse mei ex, invidunt constituto usu te, sea te delectus urbanitas interpretaris. Eu ullum ubique eum, id aliquid mediocrem quo. Nam ne eius debitis. Vis porro labitur laboramus an. Utamur electram voluptatum qui cu, nobis efficiendi eloquentiam in quo, scripta euripidis in est. At viris imperdiet vix. Justo assueverit reprehendunt has in, nostrud legendos appellantur eam ea. Eos ex erat errem utinam, eos epicuri philosophia ut, ad eam ubique labore. Eos nibh laboramus ei, ei sumo fugit pro, ut dicat impetus partiendo
<p>Sed da sine vocabulario, il magazines interlinguistica web. Al duo tote synonymo finalmente. Ma ille toto del, ha durante synonymo uso. Le peano vices non, duo libere technic articulo in. Sine paternoster simplificate su non, anglese moderne secundo da web. Non message linguistas al, non nomine capital primarimente su. Effortio linguistic litteratura o que, pro lingua auxiliar su. Pote basate programma il nos. Non ha responder appellate traduction, es que lista celos. Con sitos complete americas le, libro excellente pan de, latente philologos conferentias pan se. Infra esseva uso ma. Involvite anglo-romanic ma que, debitas internet primarimente il web. Uso da servi demonstrate anglo-romanic. Major titulo ma via. Per usos articulos in. Qui le vostre pardona programma, qui patre basate appellate le. Synonymo involvite comprende o nos, non o anglese linguage representantes. Lo cadeva religion pro, in sia studio excellente, qui gode spatios anglese un. Libere...

CSS

*
{margin:0;padding:0;}
body
{background:#debe94;color:#000;font:15px Calibri, Arial, sans-serif;text-shadow:1px 1px 1px #FFFFFF;padding:10px;}
a,a:visited
{text-decoration:none;outline:none;color:#a00;}
a:hover
{color:#fff;}
footer
{background:#D3A76F;position:fixed;width:100%;border-top:1px solid #333;height:70px;bottom:0;left:0;color:#fff;text-shadow:1px 2px 0 #000;}
footer h2
{font:25px/26px Acens;font-weight:bold;left:70%;margin:0px 0 0 150px;padding:20px 0;position:relative;width:400px;}
footer a.orig,
a.orig:visited
{-moz-box-shadow:0px 0px 20px #000;-webkit-box-shadow:0px 0px 20px #000;box-shadow:0px 0px 20px #000;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
    text-decoration:blink;
    font-weight:bold;
    color:#f00;
    font-size:14px;
    left:37%;
    line-height:46px;
    margin:12px 0 0 -405px;
    position:absolute;
    top:0;
    width:75px;
}
.cred {padding-top:15px;}
h1{text-align:center;text-shadow:3px 3px 5px #000;padding:55px;font-family: Verdana, Geneva, sans-serif;font-size:20pt;color:#D3A76F;}
.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;
}

JavaScript

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
        });
    });
}