Hafiz Zulkafly

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

Ahad, Jun 05, 2016


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.


12 ulasan

  1. thankk youu for this tutoriall !! memang dah lama carii macam mana nakk buatt .. huhu ... >.< A bigg thank youu for u ! :D

    BalasPadam
  2. YA ALLAH nak nangis rasanya bila tengok tutorial ni! terima kasih banyak banyak hafiz! merata dah aku carik! terima kasih banyak banyak!

    BalasPadam
    Balasan
    1. jangan menangis dulu. cuba buat, kalau menjadi baru boleh nangis. hehehe
      sama sama XD

      Padam
  3. terima kasih awok.. lama kita skodeng coding ni ^_^

    BalasPadam
  4. Awak ada buat tuto navigation utk blogskin tak? Navigation yg x perlukan link tu. Hehe

    BalasPadam
    Balasan
    1. maksud awak macam mana ye navigation yang tak perlukan link tu?

      Padam

© 2017 HAFIZ ZULKAFLY ALL RIGHTS RESERVED