(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: jQuery, Lanjutan, Potongan
24 Comments:
Kadang2 aku bingung di blog ini kalau cuman ngeposting kode bgini. mbok ya di jelasin dikit bang fungsinya atau apanya gitu :D
By Sinto, at Sunday, May 6, 2012 at 4:57:00 AM GMT+7
@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
By Beben Koben, at Sunday, May 6, 2012 at 5:07:00 AM GMT+7
cocok buat sidebar donk mas?? tp caranya gmn yah, masih belom tau ^_^
By Putra, at Sunday, May 6, 2012 at 9:55:00 AM GMT+7
@system of blog
kalo ngga salah ini sama kaya headernya nya Googlee Blog
coba aja lihat di sini http://googleblog.blogspot.com/
By Unknown, at Sunday, May 6, 2012 at 3:55:00 PM GMT+7
[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]
By Unknown, at Sunday, May 6, 2012 at 4:04:00 PM GMT+7
@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.
By Unknown, at Sunday, May 6, 2012 at 5:11:00 PM GMT+7
thanks mas bro, udah diterapkan...
By arimjie blog, at Monday, May 7, 2012 at 10:17:00 PM GMT+7
yg master aja bingung..., gmn yg awwam kyk sy ya...? :p
By Rohis Facebook, at Tuesday, May 8, 2012 at 3:34:00 PM GMT+7
@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.
By Taufik Nurrohman, at Tuesday, May 8, 2012 at 5:36:00 PM GMT+7
@Syndicate OS : ha.. setuju... bikin komentar yang tampil tidak terlalu panjaangg...
By Piyen, at Tuesday, May 8, 2012 at 6:27:00 PM GMT+7
@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.
By Taufik Nurrohman, at Thursday, May 17, 2012 at 10:29:00 AM GMT+7
@Taufik Nurrohman Kalo thread comment yang ini bisa dikurangin ngga mas ?
misalnya 25 komentar per halaman
By Unknown, at Friday, May 18, 2012 at 9:22:00 AM GMT+7
@Syndicate OS Belum pernah praktek. Tapi coba saja ubah semua angka 200 menjadi 25.
By Taufik Nurrohman, at Friday, May 18, 2012 at 10:09:00 AM GMT+7
@Taufik Nurrohman AKu rasa gak bisa. aku udah pernah nyoba ganti 200 menjadi 20 tapi gak bisa :(
By Sinto, at Friday, May 18, 2012 at 4:44:00 PM GMT+7
@system of blog
kalo threadepunya si tyien nyugen bisa ngga ?
yang vinaluv
By Unknown, at Thursday, June 7, 2012 at 10:52:00 AM GMT+7
Mas, bahas tentang sticky sidebar dong :)
By Ijal Fauzi, at Tuesday, June 19, 2012 at 12:39:00 AM GMT+7
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
By Surga Kenari, at Saturday, November 24, 2012 at 11:45:00 AM GMT+7
mas tlog di cek lg, kok ga efek yah..
pdhl sudah di tambahin position:relative
masih ga working
By Surga Kenari, at Sunday, November 25, 2012 at 2:25:00 PM GMT+7
saya udah meng-otak-atik tapi ga bisa juga. saya mencoba position:relative menjadi absolute baru bisa..
gmn mas taufik?
By Surga Kenari, at Monday, November 26, 2012 at 9:29:00 AM GMT+7
Boleh.
By Taufik Nurrohman, at Monday, December 10, 2012 at 2:56:00 PM GMT+7
Dulu saya pernah nemu tutorialnya kalau gak salah. Tetapi saya tidak yakin, apakah itu jenis thread comment atau comment biasa.
By budkalon, at Friday, April 26, 2013 at 12:43:00 AM GMT+7
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
By juragan valas, at Saturday, April 19, 2014 at 10:41:00 AM GMT+7
Coba bereksperimen pakai ini. Lihat pada opsi End Limit
By Taufik Nurrohman, at Monday, April 21, 2014 at 7:28:00 PM GMT+7
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 :)
By Rak Bunga, at Friday, October 14, 2016 at 2:34:00 PM GMT+7
Post a Comment
<< Home