Make Beautiful Sticky Nag Screen use jQuery

Untuk menjawab pertanyaan dari sobat blogger (http://fchords.blogspot.com/) tentang bagaimana cara Membuat menu navigasi kayak di Indowebster, maka saya akan coba berbagi cara tersebut, namun jika masih ada kekurangan, harap maklum. karena saya juga kurang begitu paham tentang JQuery.

Jika sobat berminat melihat koleksi jQuery sticky scroll plugins keren punya dapat membaca di halaman http://bashooka.com/coding/jquery-sticky-scroll-plugins/

Sebagai seorang blogger jika menampilkan sticky yang itu-itu juga terlihat monoton  

Bagaimana dengan model seperti berikut Beautiful Nag Screen using JQuery & CSS3 Mari kita bahas beautiful sticky nag screen use jquery

DEMO

Code 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'>

<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>

</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


source; http://beben-koben.blogspot.com/2012/09/make-beautiful-sticky-nag-screen-use.html

<a href="http://ngocop16.blogspot.com/2012/10/make-beautiful-sticky-nag-screen-use.html">Make Beautiful Sticky Nag Screen use jQuery</a>

Share this article :