Sunday, May 6, 2012

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

Labels: , ,

24 Comments:

At Sunday, May 6, 2012 at 4:57:00 AM GMT+7, Blogger Sinto said...

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

 
At Sunday, May 6, 2012 at 5:07:00 AM GMT+7, Blogger Beben Koben said...

@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

 
At Sunday, May 6, 2012 at 9:55:00 AM GMT+7, Blogger Putra said...

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

 
At Sunday, May 6, 2012 at 3:55:00 PM GMT+7, Blogger Unknown said...

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

 
At Sunday, May 6, 2012 at 4:04:00 PM GMT+7, Blogger Unknown said...

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

 
At Sunday, May 6, 2012 at 5:11:00 PM GMT+7, Blogger Unknown said...

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

 
At Monday, May 7, 2012 at 10:17:00 PM GMT+7, Blogger arimjie blog said...

thanks mas bro, udah diterapkan...

 
At Tuesday, May 8, 2012 at 3:34:00 PM GMT+7, Blogger Rohis Facebook said...

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

 
At Tuesday, May 8, 2012 at 5:36:00 PM GMT+7, Blogger Taufik Nurrohman said...

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

 
At Tuesday, May 8, 2012 at 6:27:00 PM GMT+7, Blogger Piyen said...

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

 
At Thursday, May 17, 2012 at 10:29:00 AM GMT+7, Blogger Taufik Nurrohman said...

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

 
At Friday, May 18, 2012 at 9:22:00 AM GMT+7, Blogger Unknown said...

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

 
At Friday, May 18, 2012 at 10:09:00 AM GMT+7, Blogger Taufik Nurrohman said...

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

 
At Friday, May 18, 2012 at 4:44:00 PM GMT+7, Blogger Sinto said...

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

 
At Thursday, June 7, 2012 at 10:52:00 AM GMT+7, Blogger Unknown said...

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

 
At Tuesday, June 19, 2012 at 12:39:00 AM GMT+7, Blogger Ijal Fauzi said...

Mas, bahas tentang sticky sidebar dong :)

 
At Saturday, November 24, 2012 at 11:45:00 AM GMT+7, Blogger Surga Kenari said...

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

 
At Sunday, November 25, 2012 at 2:25:00 PM GMT+7, Blogger Surga Kenari said...

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

pdhl sudah di tambahin position:relative

masih ga working

 
At Monday, November 26, 2012 at 9:29:00 AM GMT+7, Blogger Surga Kenari said...

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

gmn mas taufik?

 
At Monday, December 10, 2012 at 2:56:00 PM GMT+7, Blogger Taufik Nurrohman said...

Boleh.

 
At Friday, April 26, 2013 at 12:43:00 AM GMT+7, Blogger budkalon said...

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

 
At Saturday, April 19, 2014 at 10:41:00 AM GMT+7, Blogger juragan valas said...

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

 
At Monday, April 21, 2014 at 7:28:00 PM GMT+7, Blogger Taufik Nurrohman said...

Coba bereksperimen pakai ini. Lihat pada opsi End Limit

 
At Friday, October 14, 2016 at 2:34:00 PM GMT+7, Blogger Rak Bunga said...

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

 

Post a Comment

<< Home