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.
Ö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 😊)
Hocam denedim, fakat çalıştıramadım. Site adresini özelden atıyorum bir yardımcı olur.
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.
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 { display: flex; justify-content: space-between; }
.layout_main { width: 75%; }
.layout_sidebar { width: 24%;margin-bottom: 1.6%; }
.layout_sidebar-inner { position: sticky; top: 0;}
Malesef hocam hepsini denedim ancak çalışmamakta. Farklı taraycılar ile de denedim ama sonuç aynı. Site adresi imzamda mevcut.
Localhostta bizzat denedim, sorunsuz çalışıyor. İmzanız gözükmemekte site adresinizi yaza bilir misiniz?
