MyBBDepo - Türkiyenin MyBB Deposu Forumuna Hoşgeldiniz
Eğer sitemize yaptığınız ilk ziyaretiniz ise, lütfen öncelikle Forum Kurallarını okuyunuz. Forumumuzda bilgi alışverişinde bulunabilmeniz için Kayıt olmalısınız. Üye olmayanlar forumumuzdan yararlanamazlar.
Eğer zaten kayıtlı kullanıcı iseniz, lütfen kullanıcı adınız ve şifreniz ile, Giriş yapınız. (Sitemize üyelik ücretsizdir).
SefaKaya avatar
Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 0/5 - 0 oy

Sticky Sidebar


Sponsor Reklam

Çevrimdışı SefaKaya
 Tarih: 14-04-2019, Saat:12:25
#1
Merhaba, kullanmakta olduğum bir sidebar mevcut yani yan panel yan blok. Bunu yapışkan hale getirmek istiyorum. Bir kaç yeri kurcaladım ancak belirtilenleri uygulamama rağmen sonuç elde edemedim. Forum kısmı sabit duracak yan panel kısmı forum bitimine kadar kayacak. Position fixed felan denedim ama istediğim tam olarak bu değil. Yardımlarınızı bekliyorum.
Cevapla
Bunu Beğenenler:
Sponsor Reklam
Sponsor Reklam Sponsor Reklam

Çevrimdışı tedem
 Tarih: 14-04-2019, Saat:16:29
#2
Örnek bir kod yazıyorum.

HTML;

Kod:
<div class="content layout">
 <div class="layout__main">Ana içerik</div>
 <div class="layout__sidebar">
   <div class="layout__sidebar-inner">Sidebar içerik</div>
 </div>
</div>

CSS;

Kod:
.layout { display: flex; justify-content: space-between; }
.layout__main { width: calc(100% - 22.25rem); }
.layout__sidebar { width: 20.75rem; }
.layout__sidebar-inner { position: sticky; top: 1.5rem;}

Kendi yaptığım Gray temada bu yöntemi kullanıyorum.

Bir de JS ile yapılmışı var;
Bkz: https://abouolia.github.io/sticky-sidebar/
(Tavsiye etmem 😊)
Cevapla
Bunu Beğenenler:

Çevrimdışı SefaKaya
 Tarih: 14-04-2019, Saat:16:34
#3
Hocam denedim, fakat çalıştıramadım. Site adresini özelden atıyorum bir yardımcı olur.
Cevapla
Bunu Beğenenler:

Çevrimdışı SefaKaya
 Tarih: 14-04-2019, Saat:17:45
#4
Kullanmış olduğum html kodu : 

Kod:
<div class="content layout">
<div class="layout__main">{$forums}</div>
<div class="layout__sidebar">
  <div class="layout__sidebar-inner">
  <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">

<tr>
<td class="thead">
<span style="color: #fff;background: rgba(0,0,0,.2);padding: 4px 8px;margin: -4px;border-radius: 5px;display: inline-block;transition: .25s ease; font-weight: bold;"><i class="fas fa-chevron-circle-right"></i> Tarih</span>
  </td>
</tr>

<tr>
  <td class="trow2" style="text-align: center;">
{$lang->welcome_current_time}
  </td>
</tr>
</table>
</div>
</div>
</div>
css ise verdiğiniz kod fakat aktif olmuyor.
Cevapla
Bunu Beğenenler:

Çevrimdışı novruz
 Tarih: 14-04-2019, Saat:18:25
(Son Düzenleme: 14-04-2019, Saat:18:26, Düzenleyen: novruz.)
#5
Kodları düzenledikten sonra SHIFT+F5 yapmayı unutmayın. Index şablonunu açın ve forum kodunu aşağıdaki örnek kod ile değiştirin;
PHP Kod:
    <div class="layout">
        
        <
div class="layout_main">{$forums}</div>
         <
div class="layout_sidebar">
 
  <div class="layout_sidebar-inner">
             
             <
table border="0" cellspacing="0" cellpadding="5" class="tborder denemetb" id="denemetb">
<
thead>
<
tr>
<
td class="thead" colspan="5">
<
div class="expcolimage"><img src="{$theme['imgdir']}/collapse.png" id="cat_reklam_img" class="expander" alt="[-]" title="[-]" /></div>
<
div><strong>Reklam Alanı</strong></div>
</
td>
</
tr>
</
thead>
<
tbody style="" id="cat_reklam_e">
<
tr>
<
td class="trow1" align="center">
<
img src="https://mybbdepo.com/images/xipb/mybb-reklam-90x90.png" alt="">
<
img src="https://mybbdepo.com/images/xipb/mybb-reklam-90x90.png" alt="">
<
img src="https://mybbdepo.com/images/xipb/mybb-reklam-90x90.png" alt="">
<
img src="https://mybbdepo.com/images/xipb/mybb-reklam-90x90.png" alt="">
<
img src="https://mybbdepo.com/images/xipb/mybb-reklam-90x90.png" alt="">
<
img src="https://mybbdepo.com/images/xipb/mybb-reklam-90x90.png" alt=""></td>
</
tr>
</
tbody>
</
table>
             
             
     
  
       
             
</div>
             
    </
div></div

CSS
PHP Kod:
.layout displayflexjustify-contentspace-between; }
.
layout_main width75%; }
.
layout_sidebar width24%;margin-bottom1.6%; }
.
layout_sidebar-inner positionstickytop0;} 
Cevapla
Bunu Beğenenler:

Çevrimdışı SefaKaya
 Tarih: 14-04-2019, Saat:18:38
#6
Malesef hocam hepsini denedim ancak çalışmamakta. Farklı taraycılar ile de denedim ama sonuç aynı. Site adresi imzamda mevcut.
Cevapla
Bunu Beğenenler:

Çevrimdışı novruz
 Tarih: 14-04-2019, Saat:18:48
#7
Localhostta bizzat denedim, sorunsuz çalışıyor. İmzanız gözükmemekte site adresinizi yaza bilir misiniz?
Cevapla
Bunu Beğenenler:

Çevrimdışı SefaKaya
 Tarih: 14-04-2019, Saat:18:50
#8
Özel mesaj gönderildi.
Cevapla
Bunu Beğenenler:

 


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  Sidebar Sorunu Hk. bitcopat 0 4 1 saat önce
Son Yorum: bitcopat
  [1.8] Sidebar İle İlgili Soru biruye 0 189 14-12-2018, Saat:20:00
Son Yorum: biruye
  Sol Üzerine Gelince Kayan Sidebar Menü batuhanbarut 6 1,166 22-02-2017, Saat:00:32
Son Yorum: batuhanbarut
  [1.8] Sidebar Giriş Paneli MatheuS 0 1,005 21-06-2016, Saat:01:11
Son Yorum: MatheuS
Göz Kırp [1.8] Sidebar Ekleme cemsidar 3 1,703 27-05-2016, Saat:17:23
Son Yorum: XLRThetis



Konuyu Okuyanlar: 1 Ziyaretçi