MyBB Depo Forum
Sticky Sidebar - Baskı Önizleme

+- MyBB Depo Forum (https://mybbdepo.com)
+-- Forum: MyBB 1.8 Depo (https://mybbdepo.com/mybb-1-8-depo-forumu)
+--- Forum: MyBB 1.8 Soru ve Sorunlarınız (https://mybbdepo.com/mybb-1-8-soru-ve-sorunlariniz-forumu)
+--- Konu Başlığı: Sticky Sidebar (/sticky-sidebar-konusu.html)

Sayfalar: 1 2


Sticky Sidebar - SefaKaya - 14-04-2019

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.


Cvp: Sticky Sidebar - tedem - 14-04-2019

Ö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 😊)


Cvp: Sticky Sidebar - SefaKaya - 14-04-2019

Hocam denedim, fakat çalıştıramadım. Site adresini özelden atıyorum bir yardımcı olur.


Cvp: Sticky Sidebar - SefaKaya - 14-04-2019

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.


Cvp: Sticky Sidebar - novruz - 14-04-2019

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;} 



Cvp: Sticky Sidebar - SefaKaya - 14-04-2019

Malesef hocam hepsini denedim ancak çalışmamakta. Farklı taraycılar ile de denedim ama sonuç aynı. Site adresi imzamda mevcut.


Cvp: Sticky Sidebar - novruz - 14-04-2019

Localhostta bizzat denedim, sorunsuz çalışıyor. İmzanız gözükmemekte site adresinizi yaza bilir misiniz?


Cvp: Sticky Sidebar - SefaKaya - 14-04-2019

Özel mesaj gönderildi.