Tutorial : Show/Hide Navigation While Scrolling on a Web Page

Assalamualaikum.

Tutorial ni di request oleh unknown dekat cbox. Memandangkan dia tak tinggal link blog dia maka aku panggil anon. Jangan marah k. Hahaha. Original code by this PAGE. Aku cuma edit sikit mengikut citarasa aku sendiri, and special thanks to Wanaseoby sebab share link dengan den.

Untuk live preview maaf tiada. Tapi buat masa terdekat boleh tengok macam mana navigation dekat blog wana dan blog den berfungi macam tu lah live preview nya.


1. Layout > Add a Gadget > HTML/Javascript  (Gadget bawah header recommended)


2. Paste code berikut.

<style>
#sebelum {
padding:10px;
}

#selepas {
width:100%;
background:#eee;
display:none;
position:fixed;
top:0;
left:0;
z-index:999;
opacity:1;
padding:0px;
text-align:center;
}
.navisatu a {
padding:5px;
border:1px solid #eee;
background:#fff;
text-decoration:none;
color:#777;
margin:5px;
letter-spacing:1px;
font-family: 'Pontano Sans', sans-serif;
font-size:11px;
color:black;
text-align:center;
}

.navidua a {
padding:7px;
background:#eee;
text-decoration:none;
color:#777;
margin:5px;
letter-spacing:2px;
text-transform:uppercase;
font-family: 'Pontano Sans', sans-serif;
font-size:14px;
color:black;
text-align:center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<center><div id="sebelum">
<div class="navisatu">
<a href="">NAVIGATION 1</a>
<a href="">NAVIGATION 2</a>
<a href="">NAVIGATION 3</a>
<a href="">NAVIGATION 4</a>
</div></div></center>

<div id="selepas"><div class="navidua">
<a href="">NAVIGATION 1</a>
<a href="">NAVIGATION 2</a>
<a href="">NAVIGATION 3</a>
<a href="">NAVIGATION 4</a>
</div></div>

<script>
    $(document).ready(function() {
        var headerTop = $('#sebelum').offset().top;
        var headerBottom = headerTop + 10; // Sub-menu should appear after this distance from top.
        $(window).scroll(function () {
            var scrollTop = $(window).scrollTop(); // Current vertical scroll position from the top
            if (scrollTop > headerBottom) { // Check to see if we have scrolled more than headerBottom
                if (($("#selepas").is(":visible") === false)) {
                    $('#selepas').fadeIn('fast');
                }
            } else {
                if ($("#selepas").is(":visible")) {
                    $('#selepas').hide();
                }
            }
        });
    });
</script>

3. Edit mana yang patut. Kemudian save dan selesai.


Aku dah cuba simplified kan coding tu dengan guna istilah yang lebih mudah. Nah serba sedikit penjelasan bagi istilah aku guna ;

Sebelum : Bila buka blog korang . Dia berada di kedudukan asal / original
Selepas : Bila scroll blog ke bawah dia akan lekat pada top blog.
Navisatu : Untuk navi dikedudukan asal
Navidua : Untuk navi bila dia dah lekat dekat atas.

Okay kalau tak paham tanya, and sorry agak berterabur sebab dah lama tak bagi tutorial. Bye.