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ş.
İki satır CSS’den oluşan her şekilde tarayıcının en üstünde kalan dandik bir sabit div olmayacak.
Güncelleme: 11.15.2020
Ufak bir css tanımıyla çok basit bir şekilde sabit alanlar oluşturabiliriz. AMP sayfalar için de geçerlidir. Sidebar da bulunan sabit widget inizin hangi genişliğe kadar aktif kalmasını min-width değeriyle tanımlayabilirsiniz.
@media only screen and (min-width: 960px) {
.content-sidebar-wrap {
display: -webkit-box; display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.sidebar-primary, .sidebar-secondary {
position: -webkit-sticky; position: sticky;
height: 100%; top: 106px;
margin-bottom: 0px;
}
.admin-bar .sidebar-primary, .admin-bar .sidebar-secondary {
top: 118px;
}
}
AMP sayfalar kullanıyorsanız hiçbir eklenti sabit sidebar alanı oluşturmanızı sağlamayacak. Henüz AMP sayfalar için sabit widget alanı imkanı sunan bir eklenti geliştirilmedi.
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.
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.