Sticky Nav

(function($) {
    var $window = $(window),
        $nav = $('nav'),
        offset = $nav.offset().top;
    $window.on("scroll", function() {
        if (offset < $(this).scrollTop()) {
            $nav.addClass('fixed');
        } else {
            $nav.removeClass('fixed');
        }
    });
})(jQuery);

Lihat Demo

24 Komentar

  • Unknown

    Kadang2 aku bingung di blog ini kalau cuman ngeposting kode bgini. mbok ya di jelasin dikit bang fungsinya atau apanya gitu :D

  • Beben Koben

    @system of blog ini sticky..
    Beranda » Tingkat Lanjut » Sticky Nav
    Fixed position tak bergerak, kalo yg postingan ini, fixed position pada ketinggian tertentu dan bila di scroll dengan batas tinggi yg sudah ditentukan, maka jadinya seperti yg ada di demo :Ozz

  • Putra

    cocok buat sidebar donk mas?? tp caranya gmn yah, masih belom tau ^_^

  • Unknown

    @system of blog
    kalo ngga salah ini sama kaya headernya nya Googlee Blog
    coba aja lihat di sini http://googleblog.blogspot.com/

  • Unknown

    [REQUEST]
    mas bikin cara bikin komentar blogger di kasih batasan per halamannya
    maksudnya gini, kalo udah nyampe 20 komentar , nanti komentar yang ke 21 ada navigasi ke halaman selanjutnya
    [kaya jenis komentar di blognya mas Alwi]

  • Unknown

    @Syndicate OS Mantap kawan makin pusing nich Dewa CSS dan Jquery di buat pengunjung. saya juga reques dan minta tolong juga nich pada bang taufik yang ganteng tentang Tampilan Posting Berbeda-Beda Berdasarkan Label tapi belum dibuatkan.

  • arimjie blog

    thanks mas bro, udah diterapkan...

  • Unknown

    yg master aja bingung..., gmn yg awwam kyk sy ya...? :p

  • Taufik Nurrohman

    @Alam Perwira Menerapkan posisi fixed pada elemen yang sebenarnya tidak fixed sebenarnya sangat tidak menguntungkan bagi elemen. Lebih baik gunakan posisi fixed palsu yang dibuat dengan cara meng-update nilai top secara terus-menerus berdasarkan jarak .scrollTop() jendela. Dengan begitu elemen akan tampak seolah-olah memiliki posisi fixed:

    var win = $(window),
    sidebar = $('aside'),
    originalTop = sidebar.css('top'),
    sidebarOffsetTop = sidebar.offset().top;
    win.scroll(function() {
    var scrollTop = $(this).scrollTop();
    if (scrollTop > sidebarOffsetTop) {
    // Update nilai top terus-menerus sepanjang jarak gulungan layar
    sidebar.css('top', scrollTop); // Update! Update! Update!!!
    } else {
    sidebar.css('top', originalTop);
    }
    });
    aside {position:relative;}

    Demo: http://jsfiddle.net/tovic/2jqCA/4/

    Cara ini juga biasa digunakan untuk mengatasi masalah position:fixed pada Internet Explorer 6 (IE6- tidak mendukung fixed position).
    Cara yang biasa digunakan untuk mengatasi itu adalah dengan JavaScript atau IE Expression.

    • Surga Kenari

      duh sudah sy coba kok ga efek yah.. tlong di cek mas

      http://sdftyujklvbn.blogspot.com/2012/03/100-status-facebook-lucu-dan-gokil.html#axzz2D6uAMUkV

    • Surga Kenari

      mas tlog di cek lg, kok ga efek yah..

      pdhl sudah di tambahin position:relative

      masih ga working

    • Surga Kenari

      saya udah meng-otak-atik tapi ga bisa juga. saya mencoba position:relative menjadi absolute baru bisa..

      gmn mas taufik?

    • Unknown

      ini yang saya cari http://jsfiddle.net/tovic/2jqCA/4/

      Tapi gimana caranya biar sticky nya gak bekerja ( fixed menjadi static ) saat mencapai batas tertentu, misalnya pas berada di atas footer. Trus bisa gak fungsi sticky dihilangkan pada ukuran layar tertentu agar tidak menggangu responsive ?

      Trims jawabannya :)

  • Piyen

    @Syndicate OS : ha.. setuju... bikin komentar yang tampil tidak terlalu panjaangg...

  • Taufik Nurrohman

    @Syndicate OS Blogger akan menampilkan navigasi halaman saat jumlah komentar sudah mencapai 50+

    var paginator = function(callback) {
    if (hasMore()) {
    var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
    if (cursor) {
    url += '&published-min=' + new Date(cursor).toISOString();
    }

    Thread Comment versi Tien yang lama akan menampilkan navigasi halaman saat jumlah komentar sudah mencapai 200+

    if (Cm_Total > 200) {
    strout = '<div style="float:left">Page ';
    var Cm_Page_Num = (Cm_Total - Cm_Total % 200) / 200 + 1;
    var Org_Url_ThreadCM = '';
    var Cm_Cur_Page = 1;
    i = Cur_Url_ThreadCM.indexOf('.html');
    if (i != -1) {
    Org_Url_ThreadCM = Cur_Url_ThreadCM.substring(0, i + 5)
    } else {
    Org_Url_ThreadCM = Cur_Url_ThreadCM
    }

    Setahu Saya sih begitu.

    • budkalon

      Dulu saya pernah nemu tutorialnya kalau gak salah. Tetapi saya tidak yakin, apakah itu jenis thread comment atau comment biasa.

  • Unknown

    @Taufik Nurrohman Kalo thread comment yang ini bisa dikurangin ngga mas ?
    misalnya 25 komentar per halaman

  • Taufik Nurrohman

    @Syndicate OS Belum pernah praktek. Tapi coba saja ubah semua angka 200 menjadi 25.

  • Unknown

    @Taufik Nurrohman AKu rasa gak bisa. aku udah pernah nyoba ganti 200 menjadi 20 tapi gak bisa :(

  • Unknown

    @system of blog
    kalo threadepunya si tyien nyugen bisa ngga ?
    yang vinaluv

  • Ijal Fauzi

    Mas, bahas tentang sticky sidebar dong :)

  • juragan valas

    gan.. saya punya code ini :

    $(function(){var offset=$('#HTML6').offset();var topPadding=0;$(window).scroll(function(){if($(window).scrollTop()> offset.top){$('#HTML6').stop().animate({marginTop:$(window).scrollTop()-offset.top+topPadding})}else{$('#HTML6').stop().animate({marginTop:0})}})});

    tapi tidak mau berenti setelah nabrak footer. perlu di tambah apa ya gan ?
    algoritmatik.blogspot.com

Komentar telah ditutup.