Recents in Beach

header ads

Script untuk Sticky Header dan Navbar

Sedikit bahkan jauh melenceng dari tema web ini, admin ingin mendokumentasikan script sticky header dan menu yang telah di terapkan di homepage.



Berikut adalah script sticky header dan menu situs ini. Copy dan pastekan script di bawah ini tepat sebelum </body>

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

Script di atas sudah mengalami modifikasi dengan menambahkan penambahan judul saat loading si situs seluler. Penambahan yang dilakukan adalah menambahakan fungsi  .tooglenama

Itu aja sih.. Semoga bermanfaat.. 

Posting Komentar

0 Komentar