Eklenti kullanmayı sevemediğim için bloğuma uygulamak istediğim özellikleri kendim kodlayarak yapmaya çalışıyorum ve bunları sizlerle paylaşıyorum. Yakın zamanda sidebar’da sabit bir reklam kullanmak isteyince araştırmaya başladım. Bırakın yerli kaynağı, yabancı kaynak bile bulamıyordum neredeyse. Sanırım benden başka kimse sabit bir reklamlar için eklenti yüklemekten çekinmemiş.
![](data:image/svg+xml;charset=utf-8,<svg height="540" width="960" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
İki satır CSS’den oluşan her şekilde tarayıcının en üstünde kalan dandik bir sabit div olmayacak.
Sidebar div içerisinde sabit kalan widget yapımına başlayalım.
Sitenizin <head> etiketinin hemen altına ekleyin.
<script>$(document).ready(function () {
var top = $('.krm-sabit').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) { $('.krm-sabit').addClass('sabit');}
else { $('.krm-sabit').removeClass('sabit');}
$('.krm-sabit').width($('.krm-sabit').parent().width());});});
</script>
Burayı en sona bırakın. <head> etiketinin hemen altına eğer çalışmazsa ekleyin.
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Hangi kütüphaneyi kullandığınızı bilmiyorum, belki gerek yoktur diye çalışmazsa ekleyin dedim. Gereksiz yük yaratmayalım.
CSS dosyanıza ekleyin.
.sabit {
position:fixed;
top:0;
z-index:99999;}
Sabit kalmasını istediğiniz widget veya sidebarın tamamına uygulayabilirsiniz. Yapmanız gereken tek şey sabit kalmasını istediğiniz div’e krm-sabit class tanımı yapmaktır.
Uygulamakta sorun yaşarsanız bana ulaşın, sizi yönlendiririm.
![](data:image/svg+xml;charset=utf-8,<svg height="90" width="90" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Hocam öncelikle eklenti kullanmadan yapabiliyor olmak hoşuma gitti. Yaptığı tek işlem reklamı sabit tutmak sonuçta. Bu yüzden eklenti kullanmak gerçekten gereksizdi. Adım adım uyguladım işe yaradı.
İşinize yaradığına sevindim.
Bu olay yüzünden başım zamanında çok ağrımıştı ancak çok basit ve js’ye ihtiyaç duymadan bir çözüm yolu üretildiğini fark ettim.
Kaydırdığımızda sabit kalmasını istediğimiz kapsayıcı dive position:sticky; eklememiz yeterlidir. Kaydırdıktan sonra üstünde boşluk kalsın derseniz top:30px; kodunu da ekleyebilirsiniz. Değeri kendinize göre ayarlayın.
Position:Sitcky;
Bilgi için çok teşekkürler. Bahsettiğiniz yöntemle sabitleme işlemi yapılabilir fakat temaya uygun hale getirmek isterseniz daha fazlasına ihtiyacınız olacak.
Bende böyle bir şey arıyordum. Her ihtiyaca bir eklenti fazla oluyor. Çok teşekkür ederim.
Rica ederim, işinize yaradığına sevindim.