Mecha versi 2.6.4 sudah dirilis!

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

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

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

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.