Membuat Menu Melayang Setelah Discroll (Sticky Menu)

Simpan kode ini di atas </body> dan tentukan selectornya (pada script dibawah saya aplikasikan pada .nav).

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

Memunculkan Menu Setelah DiSroll

Apabila ingin memunculkan menu hanya setelah discroll, gunakan kode ini :

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

jangan lupah tinggalkan komentar sobat kalu bermanfaat :-D