Membuat Menu Navigasi Tetap Muncul Saat dan Setelah Scroll Bar

             

Keterangan Membuat Menu Navigasi Tetap Muncul Saat dan Setelah Scroll Bar :

Membuat Menu Navigasi Tetap Muncul Saat dan Setelah Scroll Bar diupload pada Rabu, Desember 30, 2015 oleh GlobalAccess di EBOOK GRATIS dengan tujuan sebagai bahan bacaan, materi pembelajaran, menambah ilmu atau untuk dijadikan salah satu referensi sesuai kebutuhan anda.

Cara Download : Klik Link di bawah, dilanjutkan mengklik gambar pada halaman download berikutnya.

Selamat pagi, iseng-iseng edit template vikka dari arlina design, dan kepikiran mau ubah navigasinya menjadi sticky. Setelah browsing sana sini akhirnya nemu di blog kang ismet ini dia kodenya, simpan di atas </body> ya :

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
// Menentukan elemen yang dijadikan sticky yaitu .nav
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
// Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya
if (scrollTop > stickyNavTop) {
$('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('.nav').css({ 'position': 'relative' });
}
};
// Jalankan fungsi
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>


nah, klo ini kode sticky setelah scroll bar..terima kasih untuk kang ismet :D

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
// Menentukan elemen yang dijadikan sticky yaitu .nav
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
// Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya
if (scrollTop > stickyNavTop) {
$('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('.nav').css({ 'position': 'absolute', 'top':-9999, 'left':-9999 });
}
};
// Jalankan fungsi
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>

Yang perlu diperhatikan, silahkan ganti .nav dengan kode css navigasi anda. Untuk demonya, anda bisa lihat blog ini ...Hahay