Mert
Reputation: 554
Position sticky not working on flexbox with overflow
I have a two columns in a flexbox. Left one, small one. It has own height and overflow itself. Right one has a auto height. When I scroll the page second column scroll down also left one does same move. But I don't want this. When I scroled whole page, left one should be sticky between navbar and footer.
I tried to position:sticky and top:0 but still doesn't work.
Here my screenshot:
ul {
margin: 0;
list-style: none;
}
li {
margin: 0;
list-style: none;
}
.glossary {
display: flex;
}
.glossary-items {
border-radius: inherit;
display: flex;
flex-direction: row;
align-items: flex-start;
}
.glossary-items-str {
align-self: stretch;
}
.glossary-letters {
border-radius: inherit;
text-align: right;
background-color: white;
line-height: 1.3 !important;
display: flex;
width: 50px;
}
.glossary-letters ul {
width: 100%;
margin-left: 0 !important;
}
.glossary-letters ul li {
width: 100%;
}
.glossary-letters a {
color: #2b2b2b;
display: block;
}
.glossary-letters a:not(.glossary-titles-active):hover {
color: #68b;
}
.glossary-titles {
border-radius: inherit;
position: relative;
top: 0;
position: sticky;
background-color: white;
}
.glossary-titles ul::-webkit-scrollbar {
width: 5px;
height: 0.5em;
}
.glossary-titles ul::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
.glossary-titles ul::-webkit-scrollbar-thumb {
background: #fff;
border-radius: 100px;
border: 1px solid #d8d8d8;
max-height: 50px;
}
.glossary-titles ul::-webkit-scrollbar-track {
background: #d8d8d8;
border-radius: 100px;
}
.glossary-titles-active {
color: #137;
font-weight: bold;
}
.glossary-titles-group {
font-size: 1.5em;
color: #137;
font-weight: bold;
position: sticky;
background: white;
top: 0 !important;
}
.glossary-titles a:not(.glossary-titles-active):hover {
color: #68b;
}
.glossary-titles ul {
overflow-y: auto;
height: 430px;
}
.glossary-content {
background-color: white;
flex: 2;
}
.glossary-content dl {
flex: 2;
}
.glossary-content h4 {
margin-top: 2.9em !important;
}
.glossary-content-container-title {
padding-right: 7px;
white-space: nowrap;
font-weight: 700;
position: relative;
}
.glossary-content-container-title-dots {
position: absolute;
right: 0;
margin-left: 5px;
display: inline-block;
font-weight: bold;
}
.glossary-content-container img {
object-fit: contain;
width: 150px;
}
.glossary-content ul {
margin: 0;
}
.glossary-content a:hover {
color: #68b;
}
.active,
.glossary-letters-link-A {
background-color: #68b;
color: white !important;
border: solid;
padding: 0 10px;
border-radius: 0 10px 5px 0;
transition: padding 0.11s ease;
}<div class="glossary-items grid ">
<div class="glossary-items-str">
<div class="d-flex border-shadow">
<div class="glossary-titles">
<ul>
<div class="group-class">
<div id="A">
It should be position sticky when scroll page down
<li class="glossary-titles-group pb-1 pt-1">A</li>
</div>
<li><a href="/tr/sozluk/Acik-Piyasa-Islemleri-API">Açık Piyasa İşlemleri (APİ)</a></li>
<li><a href="/tr/sozluk/Agirlikli-Ortalama-Fonlama-Maliyeti">Ağırlıklı Ortalama Fonlama Maliyeti</a></li>
</div>
<div class="group-class">
<div id="B">
<li class="glossary-titles-group pb-1 pt-1">B</li>
</div>
<li><a href="/tr/sozluk/BIST-100-Endeksi">BİST-100 Endeksi</a></li>
<li><a href="/tr/sozluk/Bina-Maliyet-Endeksi">Bina Maliyet Endeksi</a></li>
<li><a href="/tr/sozluk/Bireysel-Kredi-Buyumesi">Bireysel Kredi Büyümesi</a></li>
<li><a href="/tr/sozluk/Borc-Cevirme-Orani">Borç Çevirme Oranı</a></li>
</div>
<div class="group-class">
<div id="C">
<li class="glossary-titles-group pb-1 pt-1">C</li>
</div>
<li><a href="/tr/sozluk/CDS">CDS</a></li>
</div>
<div class="group-class">
<div id="D">
<li class="glossary-titles-group pb-1 pt-1">D</li>
</div>
<li><a href="/tr/sozluk/Dis-Ticaret-Beklenti-Anketi">Dış Ticaret Beklenti Anketi</a></li>
<li><a href="/tr/sozluk/Dis-Ticaret-Endeksi">Dış Ticaret Endeksi</a></li>
<li><a href="/tr/sozluk/Dis-Ticaret-Istatistikleri">Dış Ticaret İstatistikleri</a></li>
<li><a href="/tr/sozluk/Dogrudan-Yabanci-Sermaye-Yatirimi">Doğrudan Yabancı Sermaye Yatırımı</a></li>
<li><a href="/tr/sozluk/Doviz-Kuru">Döviz Kuru</a></li>
</div>
<div class="group-class">
<div id="E">
<li class="glossary-titles-group pb-1 pt-1">E</li>
</div>
<li><a href="/tr/sozluk/Ekonomik-Guven-Endeksi">Ekonomik Güven Endeksi</a></li>
<li><a href="/tr/sozluk/Emisyon">Emisyon</a></li>
</div>
<div class="group-class">
<div id="F">
<li class="glossary-titles-group pb-1 pt-1">F</li>
</div>
<li><a href="/tr/sozluk/Faiz-Disi-Denge">Faiz Dışı Denge</a></li>
<li><a href="/tr/sozluk/Finansal-Hizmetler-Guven-Endeksi">Finansal Hizmetler Güven Endeksi</a></li>
<li><a href="/tr/sozluk/Finansal-Kesim-Disi-Firmalarin-Net-Doviz-Pozisyonu" aria-current="page" class="glossary-titles-active">Finansal Kesim Dışı Firmaların Net Döviz Pozisyonu</a></li>
</div>
<div class="group-class">
<div id="G">
<li class="glossary-titles-group pb-1 pt-1">G</li>
</div>
<li><a href="/tr/sozluk/Gec-Likidite-Penceresi">Geç Likidite Penceresi</a></li>
<li><a href="/tr/sozluk/Genc-Issizlik">Genç İşsizlik</a></li>
<li><a href="/tr/sozluk/Getiri-Verim-Egrisi">Getiri Verim Eğrisi</a></li>
<li><a href="/tr/sozluk/Gosterge-Faiz">Gösterge Faiz</a></li>
<li><a href="/tr/sozluk/GSYH---Buyume">GSYH - Büyüme</a></li>
<li><a href="/tr/sozluk/GSYH---Uretim-Yontemi">GSYH - Üretim Yöntemi</a></li>
</div>
<div class="group-class">
<div id="H">
<li class="glossary-titles-group pb-1 pt-1">H</li>
</div>
<li><a href="/tr/sozluk/Hayvan-Uretim-Istatistikleri">Hayvan Üretim İstatistikleri</a></li>
<li><a href="/tr/sozluk/Hazine-Nakit-Gerceklesmeleri">Hazine Nakit Gerçekleşmeleri</a></li>
<li><a href="/tr/sozluk/Hizmet-Uretici-Fiyat-Endeksi">Hizmet Üretici Fiyat Endeksi</a></li>
</div>
<div class="group-class">
<div id="I">
<li class="glossary-titles-group pb-1 pt-1">I</li>
</div>
<li><a href="/tr/sozluk/Ihracat-Iklimi-Endeksi">İhracat İklimi Endeksi</a></li>
<li><a href="/tr/sozluk/Insaat-Maliyet-Endeksi">İnşaat Maliyet Endeksi</a></li>
<li><a href="/tr/sozluk/Isgucu-Gostergeleri">İşgücü Göstergeleri</a></li>
<li><a href="/tr/sozluk/Issizlik">İşsizlik</a></li>
<li><a href="/tr/sozluk/Istanbul-Ucretliler-Gecinme-Endeksi">İstanbul Ücretliler Geçinme Endeksi</a></li>
</div>
<div class="group-class">
<div id="K">
<li class="glossary-titles-group pb-1 pt-1">K</li>
</div>
<li><a href="/tr/sozluk/Kamu-Borclanmasi">Kamu Borçlanması</a></li>
<li><a href="/tr/sozluk/Kapasite-Kullanim-Orani">Kapasite Kullanım Oranı</a></li>
<li><a href="/tr/sozluk/Kisa-Vadeli-Dis-Borc-Istatistikleri">Kısa Vadeli Dış Borç İstatistikleri</a></li>
<li><a href="/tr/sozluk/Kisibasi-GSYH">Kişibaşı GSYH</a></li>
<li><a href="/tr/sozluk/Konut-Fiyat-Endeksi">Konut Fiyat Endeksi</a></li>
<li><a href="/tr/sozluk/Konut-Satislari">Konut Satışları</a></li>
<li><a href="/tr/sozluk/Kredi/Mevduat-Orani">Kredi/Mevduat Oranı</a></li>
</div>
<div class="group-class">
<div id="L">
<li class="glossary-titles-group pb-1 pt-1">L</li>
</div>
<li><a href="/tr/sozluk/Lorenz-Egrisi-Gini-Katsayisi">Lorenz Eğrisi / Gini Katsayısı</a></li>
</div>
<div class="group-class">
<div id="M">
<li class="glossary-titles-group pb-1 pt-1">M</li>
</div>
<li><a href="/tr/sozluk/Menkul-Kiymet-Istatistikleri">Menkul Kıymet İstatistikleri</a></li>
<li><a href="/tr/sozluk/Merkez-Bankasi-Rezervleri">Merkez Bankası Rezervleri</a></li>
<li><a href="/tr/sozluk/Merkezi-Yonetim-Butcesi">Merkezi Yönetim Bütçesi</a></li>
<li><a href="/tr/sozluk/Motorlu-Kara-Tasitlari-Istatistikleri">Motorlu Kara Taşıtları İstatistikleri</a></li>
</div>
<div class="group-class">
<div id="N">
<li class="glossary-titles-group pb-1 pt-1">N</li>
</div>
<li><a href="/tr/sozluk/Net-Hata-Noksan">Net Hata Noksan</a></li>
</div>
<div class="group-class">
<div id="O">
<li class="glossary-titles-group pb-1 pt-1">O</li>
</div>
<li><a href="/tr/sozluk/Odemeler-Dengesi">Ödemeler Dengesi</a></li>
<li><a href="/tr/sozluk/Ozel-Sektor-Yurtdisi-Kredileri">Özel Sektör Yurtdışı Kredileri</a></li>
</div>
<div class="group-class">
<div id="P">
<li class="glossary-titles-group pb-1 pt-1">P</li>
</div>
<li><a href="/tr/sozluk/Para-Arzi">Para Arzı</a></li>
<li><a href="/tr/sozluk/Perakende-Satis-Endeksi">Perakende Satış Endeksi</a></li>
<li><a href="/tr/sozluk/PMI">PMI</a></li>
<li><a href="/tr/sozluk/Politika-Faizi">Politika Faizi</a></li>
<li><a href="/tr/sozluk/Portfoy-Yatirimlari">Portföy Yatırımları</a></li>
</div>
<div class="group-class">
<div id="R">
<li class="glossary-titles-group pb-1 pt-1">R</li>
</div>
<li><a href="/tr/sozluk/Reel-Efektif-Doviz-Kuru">Reel Efektif Döviz Kuru</a></li>
<li><a href="/tr/sozluk/Reel-Kesim-Guven-Endeksi">Reel Kesim Güven Endeksi</a></li>
<li><a href="/tr/sozluk/ROM/ROK">ROM/ROK</a></li>
</div>
<div class="group-class">
<div id="S">
<li class="glossary-titles-group pb-1 pt-1">S</li>
</div>
<li><a href="/tr/sozluk/SAMEKS">SAMEKS</a></li>
<li><a href="/tr/sozluk/Sanayi-Ciro-Endeksi">Sanayi Ciro Endeksi</a></li>
<li><a href="/tr/sozluk/Sanayi-Uretim-Endeksi">Sanayi Üretim Endeksi</a></li>
<li><a href="/tr/sozluk/Satinalma-Gucu-Paritesi">Satınalma Gücü Paritesi</a></li>
<li><a href="/tr/sozluk/Sektorel-Guven-Endeksi">Sektörel Güven Endeksi</a></li>
<li><a href="/tr/sozluk/Sermaye-Yeterlilik-Orani">Sermaye Yeterlilik Oranı</a></li>
<li><a href="/tr/sozluk/Sinir-Giris-Cikis-Istatistikleri">Sınır Giriş/Çıkış İstatistikleri</a></li>
</div>
<div class="group-class">
<div id="T">
<li class="glossary-titles-group pb-1 pt-1">T</li>
</div>
<li><a href="/tr/sozluk/Tarim-UFE">Tarım ÜFE</a></li>
<li><a href="/tr/sozluk/Tarimsal-Girdi-Fiyat-Endeksi">Tarımsal Girdi Fiyat Endeksi</a></li>
<li><a href="/tr/sozluk/TCMB-Beklenti-Anketi">TCMB Beklenti Anketi</a></li>
<li><a href="/tr/sozluk/TCMB-Bilancosu">TCMB Bilançosu</a></li>
<li><a href="/tr/sozluk/Ticari-Kredi-Buyumesi">Ticari Kredi Büyümesi</a></li>
<li><a href="/tr/sozluk/Toplam-Ciro-Endeksleri">Toplam Ciro Endeksleri</a></li>
<li><a href="/tr/sozluk/TUFE">TÜFE</a></li>
<li><a href="/tr/sozluk/TUFE---Cekirdek">TÜFE - Çekirdek</a></li>
<li><a href="/tr/sozluk/Tuketici-Guven-Endeksi">Tüketici Güven Endeksi</a></li>
<li><a href="/tr/sozluk/Turk-Is-Gida-Endeksi">Türk-İş Gıda Endeksi</a></li>
</div>
<div class="group-class">
<div id="U">
<li class="glossary-titles-group pb-1 pt-1">U</li>
</div>
<li><a href="/tr/sozluk/Uluslararasi-Rezervler-ve-Doviz-Likiditesi">Uluslararası Rezervler ve Döviz Likiditesi</a></li>
<li><a href="/tr/sozluk/Uluslararasi-Yatirim-Pozisyonu">Uluslararası Yatırım Pozisyonu</a></li>
<li><a href="/tr/sozluk/Uluslararasi-Yukumlulukler">Uluslararası Yükümlülükler</a></li>
</div>
<div class="group-class">
<div id="V">
<li class="glossary-titles-group pb-1 pt-1">V</li>
</div>
<li><a href="/tr/sozluk/Vergi-Tahakkuk-Tahsil-Orani">Vergi Tahakkuk / Tahsil Oranı</a></li>
</div>
<div class="group-class">
<div id="Y">
<li class="glossary-titles-group pb-1 pt-1">Y</li>
</div>
<li><a href="/tr/sozluk/Yabanci-Para-Mevduatlari">Yabancı Para Mevduatları</a></li>
<li><a href="/tr/sozluk/YD-UFE">YD-ÜFE</a></li>
<li><a href="/tr/sozluk/YI-UFE">Yİ-ÜFE</a></li>
<li><a href="/tr/sozluk/Yurtdisi-Yukumlulukler">Yurtdışı Yükümlülükler</a></li>
</div>
</ul><span class="visible-bottom"></span>
</div>
</div>
</div>
<div class="glossary-content p-3 mt-1-sm border-shadow">
<div tabindex="-1" style="outline: none;">
<div class="glossary-content-container ">
<h2>Finansal Kesim Dışı Firmaların Net Döviz Pozisyonu</h2>
<div class="d-flex flex-wrap justify-content-between mb-3 ">
<table>
<tr>
<td valign="top" class="glossary-content-container-title"><span style="font-size: 1rem;">Yayınlayan Kurum</span><span class="glossary-content-container-title-dots">:</span></td>
<td class="glossary-content-container-td">TCMB</td>
</tr>
<tr>
<td valign="top" class="glossary-content-container-title"><span style="font-size: 1rem;">İlk Yayınlanma Tarihi</span><span class="glossary-content-container-title-dots">:</span></td>
<td class="glossary-content-container-td">Aralık 2002</td>
</tr>
<tr>
<td valign="top" class="glossary-content-container-title"><span style="font-size: 1rem;">Periyodu</span><span class="glossary-content-container-title-dots">:</span></td>
<td class="glossary-content-container-td">Aylık</td>
</tr>
</table><img alt="Finansal Kesim Dışı Firmaların Net Döviz Pozisyonu" src="/images/glossary/risk/risk-2.png">
</div>
</div>
<div>
Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock,
bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de
Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan
"Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir. 1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de
1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan
2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini
incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak
kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir. 1500'lerden beri kullanılmakta olan standard Lorem Ipsum
metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.Yaygın inancın tersine, Lorem Ipsum
rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen
ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi
ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32
sayılı bölümdeki bir satırdan gelmektedir. 1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan
İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki
Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır.
Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde
çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir. 1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir.
Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45
tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan
'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve
1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.
1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden
yeniden üretilmiştir.
</div>
</div>
</div>Upvotes: 1
Views: 154
Answers (3)
doğukan
Reputation: 27421
Just add height: 100%; to <div class="d-flex border-shadow">
ul {
margin: 0;
list-style: none;
}
li {
margin: 0;
list-style: none;
}
.glossary {
display: flex;
}
.glossary-items {
border-radius: inherit;
display: flex;
flex-direction: row;
align-items: flex-start;
}
.glossary-items-str {
align-self: stretch;
}
.glossary-letters {
border-radius: inherit;
text-align: right;
background-color: white;
line-height: 1.3 !important;
display: flex;
width: 50px;
}
.glossary-letters ul {
width: 100%;
margin-left: 0 !important;
}
.glossary-letters ul li {
width: 100%;
}
.glossary-letters a {
color: #2b2b2b;
display: block;
}
.glossary-letters a:not(.glossary-titles-active):hover {
color: #68b;
}
.glossary-titles {
border-radius: inherit;
position: relative;
top: 0;
position: sticky;
background-color: white;
}
.glossary-titles ul::-webkit-scrollbar {
width: 5px;
height: 0.5em;
}
.glossary-titles ul::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
.glossary-titles ul::-webkit-scrollbar-thumb {
background: #fff;
border-radius: 100px;
border: 1px solid #d8d8d8;
max-height: 50px;
}
.glossary-titles ul::-webkit-scrollbar-track {
background: #d8d8d8;
border-radius: 100px;
}
.glossary-titles-active {
color: #137;
font-weight: bold;
}
.glossary-titles-group {
font-size: 1.5em;
color: #137;
font-weight: bold;
position: sticky;
background: white;
top: 0 !important;
}
.glossary-titles a:not(.glossary-titles-active):hover {
color: #68b;
}
.glossary-titles ul {
overflow-y: auto;
height: 430px;
}
.glossary-content {
background-color: white;
flex: 2;
}
.glossary-content dl {
flex: 2;
}
.glossary-content h4 {
margin-top: 2.9em !important;
}
.glossary-content-container-title {
padding-right: 7px;
white-space: nowrap;
font-weight: 700;
position: relative;
}
.glossary-content-container-title-dots {
position: absolute;
right: 0;
margin-left: 5px;
display: inline-block;
font-weight: bold;
}
.glossary-content-container img {
object-fit: contain;
width: 150px;
}
.glossary-content ul {
margin: 0;
}
.glossary-content a:hover {
color: #68b;
}
.active,
.glossary-letters-link-A {
background-color: #68b;
color: white !important;
border: solid;
padding: 0 10px;
border-radius: 0 10px 5px 0;
transition: padding 0.11s ease;
}<div class="glossary-items grid ">
<div class="glossary-items-str">
<div class="d-flex border-shadow" style="height: 100%;">
<div class="glossary-titles">
<ul>
<div class="group-class">
<div id="A">
It should be position sticky when scroll page down
<li class="glossary-titles-group pb-1 pt-1">A</li>
</div>
<li><a href="/tr/sozluk/Acik-Piyasa-Islemleri-API">Açık Piyasa İşlemleri (APİ)</a></li>
<li><a href="/tr/sozluk/Agirlikli-Ortalama-Fonlama-Maliyeti">Ağırlıklı Ortalama Fonlama Maliyeti</a></li>
</div>
<div class="group-class">
<div id="B">
<li class="glossary-titles-group pb-1 pt-1">B</li>
</div>
<li><a href="/tr/sozluk/BIST-100-Endeksi">BİST-100 Endeksi</a></li>
<li><a href="/tr/sozluk/Bina-Maliyet-Endeksi">Bina Maliyet Endeksi</a></li>
<li><a href="/tr/sozluk/Bireysel-Kredi-Buyumesi">Bireysel Kredi Büyümesi</a></li>
<li><a href="/tr/sozluk/Borc-Cevirme-Orani">Borç Çevirme Oranı</a></li>
</div>
<div class="group-class">
<div id="C">
<li class="glossary-titles-group pb-1 pt-1">C</li>
</div>
<li><a href="/tr/sozluk/CDS">CDS</a></li>
</div>
<div class="group-class">
<div id="D">
<li class="glossary-titles-group pb-1 pt-1">D</li>
</div>
<li><a href="/tr/sozluk/Dis-Ticaret-Beklenti-Anketi">Dış Ticaret Beklenti Anketi</a></li>
<li><a href="/tr/sozluk/Dis-Ticaret-Endeksi">Dış Ticaret Endeksi</a></li>
<li><a href="/tr/sozluk/Dis-Ticaret-Istatistikleri">Dış Ticaret İstatistikleri</a></li>
<li><a href="/tr/sozluk/Dogrudan-Yabanci-Sermaye-Yatirimi">Doğrudan Yabancı Sermaye Yatırımı</a></li>
<li><a href="/tr/sozluk/Doviz-Kuru">Döviz Kuru</a></li>
</div>
<div class="group-class">
<div id="E">
<li class="glossary-titles-group pb-1 pt-1">E</li>
</div>
<li><a href="/tr/sozluk/Ekonomik-Guven-Endeksi">Ekonomik Güven Endeksi</a></li>
<li><a href="/tr/sozluk/Emisyon">Emisyon</a></li>
</div>
<div class="group-class">
<div id="F">
<li class="glossary-titles-group pb-1 pt-1">F</li>
</div>
<li><a href="/tr/sozluk/Faiz-Disi-Denge">Faiz Dışı Denge</a></li>
<li><a href="/tr/sozluk/Finansal-Hizmetler-Guven-Endeksi">Finansal Hizmetler Güven Endeksi</a></li>
<li><a href="/tr/sozluk/Finansal-Kesim-Disi-Firmalarin-Net-Doviz-Pozisyonu" aria-current="page" class="glossary-titles-active">Finansal Kesim Dışı Firmaların Net Döviz Pozisyonu</a></li>
</div>
<div class="group-class">
<div id="G">
<li class="glossary-titles-group pb-1 pt-1">G</li>
</div>
<li><a href="/tr/sozluk/Gec-Likidite-Penceresi">Geç Likidite Penceresi</a></li>
<li><a href="/tr/sozluk/Genc-Issizlik">Genç İşsizlik</a></li>
<li><a href="/tr/sozluk/Getiri-Verim-Egrisi">Getiri Verim Eğrisi</a></li>
<li><a href="/tr/sozluk/Gosterge-Faiz">Gösterge Faiz</a></li>
<li><a href="/tr/sozluk/GSYH---Buyume">GSYH - Büyüme</a></li>
<li><a href="/tr/sozluk/GSYH---Uretim-Yontemi">GSYH - Üretim Yöntemi</a></li>
</div>
<div class="group-class">
<div id="H">
<li class="glossary-titles-group pb-1 pt-1">H</li>
</div>
<li><a href="/tr/sozluk/Hayvan-Uretim-Istatistikleri">Hayvan Üretim İstatistikleri</a></li>
<li><a href="/tr/sozluk/Hazine-Nakit-Gerceklesmeleri">Hazine Nakit Gerçekleşmeleri</a></li>
<li><a href="/tr/sozluk/Hizmet-Uretici-Fiyat-Endeksi">Hizmet Üretici Fiyat Endeksi</a></li>
</div>
<div class="group-class">
<div id="I">
<li class="glossary-titles-group pb-1 pt-1">I</li>
</div>
<li><a href="/tr/sozluk/Ihracat-Iklimi-Endeksi">İhracat İklimi Endeksi</a></li>
<li><a href="/tr/sozluk/Insaat-Maliyet-Endeksi">İnşaat Maliyet Endeksi</a></li>
<li><a href="/tr/sozluk/Isgucu-Gostergeleri">İşgücü Göstergeleri</a></li>
<li><a href="/tr/sozluk/Issizlik">İşsizlik</a></li>
<li><a href="/tr/sozluk/Istanbul-Ucretliler-Gecinme-Endeksi">İstanbul Ücretliler Geçinme Endeksi</a></li>
</div>
<div class="group-class">
<div id="K">
<li class="glossary-titles-group pb-1 pt-1">K</li>
</div>
<li><a href="/tr/sozluk/Kamu-Borclanmasi">Kamu Borçlanması</a></li>
<li><a href="/tr/sozluk/Kapasite-Kullanim-Orani">Kapasite Kullanım Oranı</a></li>
<li><a href="/tr/sozluk/Kisa-Vadeli-Dis-Borc-Istatistikleri">Kısa Vadeli Dış Borç İstatistikleri</a></li>
<li><a href="/tr/sozluk/Kisibasi-GSYH">Kişibaşı GSYH</a></li>
<li><a href="/tr/sozluk/Konut-Fiyat-Endeksi">Konut Fiyat Endeksi</a></li>
<li><a href="/tr/sozluk/Konut-Satislari">Konut Satışları</a></li>
<li><a href="/tr/sozluk/Kredi/Mevduat-Orani">Kredi/Mevduat Oranı</a></li>
</div>
<div class="group-class">
<div id="L">
<li class="glossary-titles-group pb-1 pt-1">L</li>
</div>
<li><a href="/tr/sozluk/Lorenz-Egrisi-Gini-Katsayisi">Lorenz Eğrisi / Gini Katsayısı</a></li>
</div>
<div class="group-class">
<div id="M">
<li class="glossary-titles-group pb-1 pt-1">M</li>
</div>
<li><a href="/tr/sozluk/Menkul-Kiymet-Istatistikleri">Menkul Kıymet İstatistikleri</a></li>
<li><a href="/tr/sozluk/Merkez-Bankasi-Rezervleri">Merkez Bankası Rezervleri</a></li>
<li><a href="/tr/sozluk/Merkezi-Yonetim-Butcesi">Merkezi Yönetim Bütçesi</a></li>
<li><a href="/tr/sozluk/Motorlu-Kara-Tasitlari-Istatistikleri">Motorlu Kara Taşıtları İstatistikleri</a></li>
</div>
<div class="group-class">
<div id="N">
<li class="glossary-titles-group pb-1 pt-1">N</li>
</div>
<li><a href="/tr/sozluk/Net-Hata-Noksan">Net Hata Noksan</a></li>
</div>
<div class="group-class">
<div id="O">
<li class="glossary-titles-group pb-1 pt-1">O</li>
</div>
<li><a href="/tr/sozluk/Odemeler-Dengesi">Ödemeler Dengesi</a></li>
<li><a href="/tr/sozluk/Ozel-Sektor-Yurtdisi-Kredileri">Özel Sektör Yurtdışı Kredileri</a></li>
</div>
<div class="group-class">
<div id="P">
<li class="glossary-titles-group pb-1 pt-1">P</li>
</div>
<li><a href="/tr/sozluk/Para-Arzi">Para Arzı</a></li>
<li><a href="/tr/sozluk/Perakende-Satis-Endeksi">Perakende Satış Endeksi</a></li>
<li><a href="/tr/sozluk/PMI">PMI</a></li>
<li><a href="/tr/sozluk/Politika-Faizi">Politika Faizi</a></li>
<li><a href="/tr/sozluk/Portfoy-Yatirimlari">Portföy Yatırımları</a></li>
</div>
<div class="group-class">
<div id="R">
<li class="glossary-titles-group pb-1 pt-1">R</li>
</div>
<li><a href="/tr/sozluk/Reel-Efektif-Doviz-Kuru">Reel Efektif Döviz Kuru</a></li>
<li><a href="/tr/sozluk/Reel-Kesim-Guven-Endeksi">Reel Kesim Güven Endeksi</a></li>
<li><a href="/tr/sozluk/ROM/ROK">ROM/ROK</a></li>
</div>
<div class="group-class">
<div id="S">
<li class="glossary-titles-group pb-1 pt-1">S</li>
</div>
<li><a href="/tr/sozluk/SAMEKS">SAMEKS</a></li>
<li><a href="/tr/sozluk/Sanayi-Ciro-Endeksi">Sanayi Ciro Endeksi</a></li>
<li><a href="/tr/sozluk/Sanayi-Uretim-Endeksi">Sanayi Üretim Endeksi</a></li>
<li><a href="/tr/sozluk/Satinalma-Gucu-Paritesi">Satınalma Gücü Paritesi</a></li>
<li><a href="/tr/sozluk/Sektorel-Guven-Endeksi">Sektörel Güven Endeksi</a></li>
<li><a href="/tr/sozluk/Sermaye-Yeterlilik-Orani">Sermaye Yeterlilik Oranı</a></li>
<li><a href="/tr/sozluk/Sinir-Giris-Cikis-Istatistikleri">Sınır Giriş/Çıkış İstatistikleri</a></li>
</div>
<div class="group-class">
<div id="T">
<li class="glossary-titles-group pb-1 pt-1">T</li>
</div>
<li><a href="/tr/sozluk/Tarim-UFE">Tarım ÜFE</a></li>
<li><a href="/tr/sozluk/Tarimsal-Girdi-Fiyat-Endeksi">Tarımsal Girdi Fiyat Endeksi</a></li>
<li><a href="/tr/sozluk/TCMB-Beklenti-Anketi">TCMB Beklenti Anketi</a></li>
<li><a href="/tr/sozluk/TCMB-Bilancosu">TCMB Bilançosu</a></li>
<li><a href="/tr/sozluk/Ticari-Kredi-Buyumesi">Ticari Kredi Büyümesi</a></li>
<li><a href="/tr/sozluk/Toplam-Ciro-Endeksleri">Toplam Ciro Endeksleri</a></li>
<li><a href="/tr/sozluk/TUFE">TÜFE</a></li>
<li><a href="/tr/sozluk/TUFE---Cekirdek">TÜFE - Çekirdek</a></li>
<li><a href="/tr/sozluk/Tuketici-Guven-Endeksi">Tüketici Güven Endeksi</a></li>
<li><a href="/tr/sozluk/Turk-Is-Gida-Endeksi">Türk-İş Gıda Endeksi</a></li>
</div>
<div class="group-class">
<div id="U">
<li class="glossary-titles-group pb-1 pt-1">U</li>
</div>
<li><a href="/tr/sozluk/Uluslararasi-Rezervler-ve-Doviz-Likiditesi">Uluslararası Rezervler ve Döviz Likiditesi</a></li>
<li><a href="/tr/sozluk/Uluslararasi-Yatirim-Pozisyonu">Uluslararası Yatırım Pozisyonu</a></li>
<li><a href="/tr/sozluk/Uluslararasi-Yukumlulukler">Uluslararası Yükümlülükler</a></li>
</div>
<div class="group-class">
<div id="V">
<li class="glossary-titles-group pb-1 pt-1">V</li>
</div>
<li><a href="/tr/sozluk/Vergi-Tahakkuk-Tahsil-Orani">Vergi Tahakkuk / Tahsil Oranı</a></li>
</div>
<div class="group-class">
<div id="Y">
<li class="glossary-titles-group pb-1 pt-1">Y</li>
</div>
<li><a href="/tr/sozluk/Yabanci-Para-Mevduatlari">Yabancı Para Mevduatları</a></li>
<li><a href="/tr/sozluk/YD-UFE">YD-ÜFE</a></li>
<li><a href="/tr/sozluk/YI-UFE">Yİ-ÜFE</a></li>
<li><a href="/tr/sozluk/Yurtdisi-Yukumlulukler">Yurtdışı Yükümlülükler</a></li>
</div>
</ul><span class="visible-bottom"></span>
</div>
</div>
</div>
<div class="glossary-content p-3 mt-1-sm border-shadow">
<div tabindex="-1" style="outline: none;">
<div class="glossary-content-container ">
<h2>Finansal Kesim Dışı Firmaların Net Döviz Pozisyonu</h2>
<div class="d-flex flex-wrap justify-content-between mb-3 ">
<table>
<tr>
<td valign="top" class="glossary-content-container-title"><span style="font-size: 1rem;">Yayınlayan Kurum</span><span class="glossary-content-container-title-dots">:</span></td>
<td class="glossary-content-container-td">TCMB</td>
</tr>
<tr>
<td valign="top" class="glossary-content-container-title"><span style="font-size: 1rem;">İlk Yayınlanma Tarihi</span><span class="glossary-content-container-title-dots">:</span></td>
<td class="glossary-content-container-td">Aralık 2002</td>
</tr>
<tr>
<td valign="top" class="glossary-content-container-title"><span style="font-size: 1rem;">Periyodu</span><span class="glossary-content-container-title-dots">:</span></td>
<td class="glossary-content-container-td">Aylık</td>
</tr>
</table><img alt="Finansal Kesim Dışı Firmaların Net Döviz Pozisyonu" src="/images/glossary/risk/risk-2.png">
</div>
</div>
<div>
Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock,
bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de
Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan
"Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir. 1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de
1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan
2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini
incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak
kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir. 1500'lerden beri kullanılmakta olan standard Lorem Ipsum
metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.Yaygın inancın tersine, Lorem Ipsum
rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen
ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi
ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32
sayılı bölümdeki bir satırdan gelmektedir. 1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan
İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki
Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır.
Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde
çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir. 1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir.
Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45
tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan
'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve
1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.
1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden
yeniden üretilmiştir.
</div>
</div>
</div>In your site,
- Add
position: sticky;top: 0;align-self: flex-start;to<div class="d-flex border-shadow">
- Remove
overflow: hidden;from<div class="glossary-items grid">
position: sticky does not works with overflow: hidden If you have to use overflow: hidden, you have to find another method.
Upvotes: 1
BeHappy
Reputation: 3988
You have to set
top: 0;
position: sticky;
to d-flex border-shadow not to glossary-titles.
ul {
margin: 0;
list-style: none;
}
li {
margin: 0;
list-style: none;
}
.glossary {
display: flex;
}
.glossary-items {
border-radius: inherit;
display: flex;
flex-direction: row;
align-items: flex-start;
}
.glossary-items-str {
align-self: stretch;
}
.glossary-letters {
border-radius: inherit;
text-align: right;
background-color: white;
line-height: 1.3 !important;
display: flex;
width: 50px;
}
.glossary-letters ul {
width: 100%;
margin-left: 0 !important;
}
.glossary-letters ul li {
width: 100%;
}
.glossary-letters a {
color: #2b2b2b;
display: block;
}
.glossary-letters a:not(.glossary-titles-active):hover {
color: #68b;
}
.stick {
top: 0;
position: sticky;
}
.glossary-titles {
border-radius: inherit;
position: relative;
background-color: white;
}
.glossary-titles ul::-webkit-scrollbar {
width: 5px;
height: 0.5em;
}
.glossary-titles ul::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
.glossary-titles ul::-webkit-scrollbar-thumb {
background: #fff;
border-radius: 100px;
border: 1px solid #d8d8d8;
max-height: 50px;
}
.glossary-titles ul::-webkit-scrollbar-track {
background: #d8d8d8;
border-radius: 100px;
}
.glossary-titles-active {
color: #137;
font-weight: bold;
}
.glossary-titles-group {
font-size: 1.5em;
color: #137;
font-weight: bold;
position: sticky;
background: white;
top: 0 !important;
}
.glossary-titles a:not(.glossary-titles-active):hover {
color: #68b;
}
.glossary-titles ul {
overflow-y: auto;
height: 430px;
}
.glossary-content {
background-color: white;
flex: 2;
}
.glossary-content dl {
flex: 2;
}
.glossary-content h4 {
margin-top: 2.9em !important;
}
.glossary-content-container-title {
padding-right: 7px;
white-space: nowrap;
font-weight: 700;
position: relative;
}
.glossary-content-container-title-dots {
position: absolute;
right: 0;
margin-left: 5px;
display: inline-block;
font-weight: bold;
}
.glossary-content-container img {
object-fit: contain;
width: 150px;
}
.glossary-content ul {
margin: 0;
}
.glossary-content a:hover {
color: #68b;
}
.active,
.glossary-letters-link-A {
background-color: #68b;
color: white !important;
border: solid;
padding: 0 10px;
border-radius: 0 10px 5px 0;
transition: padding 0.11s ease;
}<<div class="glossary-items grid ">
<div class="glossary-items-str">
<div class="d-flex border-shadow stick">
<div class="glossary-titles">
<ul>
<div class="group-class">
<div id="A">
It should be position sticky when scroll page down
<li class="glossary-titles-group pb-1 pt-1">A</li>
</div>
<li><a href="/tr/sozluk/Acik-Piyasa-Islemleri-API">Açık Piyasa İşlemleri (APİ)</a></li>
<li><a href="/tr/sozluk/Agirlikli-Ortalama-Fonlama-Maliyeti">Ağırlıklı Ortalama Fonlama Maliyeti</a></li>
</div>
<div class="group-class">
<div id="B">
<li class="glossary-titles-group pb-1 pt-1">B</li>
</div>
<li><a href="/tr/sozluk/BIST-100-Endeksi">BİST-100 Endeksi</a></li>
<li><a href="/tr/sozluk/Bina-Maliyet-Endeksi">Bina Maliyet Endeksi</a></li>
<li><a href="/tr/sozluk/Bireysel-Kredi-Buyumesi">Bireysel Kredi Büyümesi</a></li>
<li><a href="/tr/sozluk/Borc-Cevirme-Orani">Borç Çevirme Oranı</a></li>
</div>
<div class="group-class">
<div id="C">
<li class="glossary-titles-group pb-1 pt-1">C</li>
</div>
<li><a href="/tr/sozluk/CDS">CDS</a></li>
</div>
<div class="group-class">
<div id="D">
<li class="glossary-titles-group pb-1 pt-1">D</li>
</div>
<li><a href="/tr/sozluk/Dis-Ticaret-Beklenti-Anketi">Dış Ticaret Beklenti Anketi</a></li>
<li><a href="/tr/sozluk/Dis-Ticaret-Endeksi">Dış Ticaret Endeksi</a></li>
<li><a href="/tr/sozluk/Dis-Ticaret-Istatistikleri">Dış Ticaret İstatistikleri</a></li>
<li><a href="/tr/sozluk/Dogrudan-Yabanci-Sermaye-Yatirimi">Doğrudan Yabancı Sermaye Yatırımı</a></li>
<li><a href="/tr/sozluk/Doviz-Kuru">Döviz Kuru</a></li>
</div>
<div class="group-class">
<div id="E">
<li class="glossary-titles-group pb-1 pt-1">E</li>
</div>
<li><a href="/tr/sozluk/Ekonomik-Guven-Endeksi">Ekonomik Güven Endeksi</a></li>
<li><a href="/tr/sozluk/Emisyon">Emisyon</a></li>
</div>
<div class="group-class">
<div id="F">
<li class="glossary-titles-group pb-1 pt-1">F</li>
</div>
<li><a href="/tr/sozluk/Faiz-Disi-Denge">Faiz Dışı Denge</a></li>
<li><a href="/tr/sozluk/Finansal-Hizmetler-Guven-Endeksi">Finansal Hizmetler Güven Endeksi</a></li>
<li><a href="/tr/sozluk/Finansal-Kesim-Disi-Firmalarin-Net-Doviz-Pozisyonu" aria-current="page" class="glossary-titles-active">Finansal Kesim Dışı Firmaların Net Döviz Pozisyonu</a></li>
</div>
<div class="group-class">
<div id="G">
<li class="glossary-titles-group pb-1 pt-1">G</li>
</div>
<li><a href="/tr/sozluk/Gec-Likidite-Penceresi">Geç Likidite Penceresi</a></li>
<li><a href="/tr/sozluk/Genc-Issizlik">Genç İşsizlik</a></li>
<li><a href="/tr/sozluk/Getiri-Verim-Egrisi">Getiri Verim Eğrisi</a></li>
<li><a href="/tr/sozluk/Gosterge-Faiz">Gösterge Faiz</a></li>
<li><a href="/tr/sozluk/GSYH---Buyume">GSYH - Büyüme</a></li>
<li><a href="/tr/sozluk/GSYH---Uretim-Yontemi">GSYH - Üretim Yöntemi</a></li>
</div>
<div class="group-class">
<div id="H">
<li class="glossary-titles-group pb-1 pt-1">H</li>
</div>
<li><a href="/tr/sozluk/Hayvan-Uretim-Istatistikleri">Hayvan Üretim İstatistikleri</a></li>
<li><a href="/tr/sozluk/Hazine-Nakit-Gerceklesmeleri">Hazine Nakit Gerçekleşmeleri</a></li>
<li><a href="/tr/sozluk/Hizmet-Uretici-Fiyat-Endeksi">Hizmet Üretici Fiyat Endeksi</a></li>
</div>
<div class="group-class">
<div id="I">
<li class="glossary-titles-group pb-1 pt-1">I</li>
</div>
<li><a href="/tr/sozluk/Ihracat-Iklimi-Endeksi">İhracat İklimi Endeksi</a></li>
<li><a href="/tr/sozluk/Insaat-Maliyet-Endeksi">İnşaat Maliyet Endeksi</a></li>
<li><a href="/tr/sozluk/Isgucu-Gostergeleri">İşgücü Göstergeleri</a></li>
<li><a href="/tr/sozluk/Issizlik">İşsizlik</a></li>
<li><a href="/tr/sozluk/Istanbul-Ucretliler-Gecinme-Endeksi">İstanbul Ücretliler Geçinme Endeksi</a></li>
</div>
<div class="group-class">
<div id="K">
<li class="glossary-titles-group pb-1 pt-1">K</li>
</div>
<li><a href="/tr/sozluk/Kamu-Borclanmasi">Kamu Borçlanması</a></li>
<li><a href="/tr/sozluk/Kapasite-Kullanim-Orani">Kapasite Kullanım Oranı</a></li>
<li><a href="/tr/sozluk/Kisa-Vadeli-Dis-Borc-Istatistikleri">Kısa Vadeli Dış Borç İstatistikleri</a></li>
<li><a href="/tr/sozluk/Kisibasi-GSYH">Kişibaşı GSYH</a></li>
<li><a href="/tr/sozluk/Konut-Fiyat-Endeksi">Konut Fiyat Endeksi</a></li>
<li><a href="/tr/sozluk/Konut-Satislari">Konut Satışları</a></li>
<li><a href="/tr/sozluk/Kredi/Mevduat-Orani">Kredi/Mevduat Oranı</a></li>
</div>
<div class="group-class">
<div id="L">
<li class="glossary-titles-group pb-1 pt-1">L</li>
</div>
<li><a href="/tr/sozluk/Lorenz-Egrisi-Gini-Katsayisi">Lorenz Eğrisi / Gini Katsayısı</a></li>
</div>
<div class="group-class">
<div id="M">
<li class="glossary-titles-group pb-1 pt-1">M</li>
</div>
<li><a href="/tr/sozluk/Menkul-Kiymet-Istatistikleri">Menkul Kıymet İstatistikleri</a></li>
<li><a href="/tr/sozluk/Merkez-Bankasi-Rezervleri">Merkez Bankası Rezervleri</a></li>
<li><a href="/tr/sozluk/Merkezi-Yonetim-Butcesi">Merkezi Yönetim Bütçesi</a></li>
<li><a href="/tr/sozluk/Motorlu-Kara-Tasitlari-Istatistikleri">Motorlu Kara Taşıtları İstatistikleri</a></li>
</div>
<div class="group-class">
<div id="N">
<li class="glossary-titles-group pb-1 pt-1">N</li>
</div>
<li><a href="/tr/sozluk/Net-Hata-Noksan">Net Hata Noksan</a></li>
</div>
<div class="group-class">
<div id="O">
<li class="glossary-titles-group pb-1 pt-1">O</li>
</div>
<li><a href="/tr/sozluk/Odemeler-Dengesi">Ödemeler Dengesi</a></li>
<li><a href="/tr/sozluk/Ozel-Sektor-Yurtdisi-Kredileri">Özel Sektör Yurtdışı Kredileri</a></li>
</div>
<div class="group-class">
<div id="P">
<li class="glossary-titles-group pb-1 pt-1">P</li>
</div>
<li><a href="/tr/sozluk/Para-Arzi">Para Arzı</a></li>
<li><a href="/tr/sozluk/Perakende-Satis-Endeksi">Perakende Satış Endeksi</a></li>
<li><a href="/tr/sozluk/PMI">PMI</a></li>
<li><a href="/tr/sozluk/Politika-Faizi">Politika Faizi</a></li>
<li><a href="/tr/sozluk/Portfoy-Yatirimlari">Portföy Yatırımları</a></li>
</div>
<div class="group-class">
<div id="R">
<li class="glossary-titles-group pb-1 pt-1">R</li>
</div>
<li><a href="/tr/sozluk/Reel-Efektif-Doviz-Kuru">Reel Efektif Döviz Kuru</a></li>
<li><a href="/tr/sozluk/Reel-Kesim-Guven-Endeksi">Reel Kesim Güven Endeksi</a></li>
<li><a href="/tr/sozluk/ROM/ROK">ROM/ROK</a></li>
</div>
<div class="group-class">
<div id="S">
<li class="glossary-titles-group pb-1 pt-1">S</li>
</div>
<li><a href="/tr/sozluk/SAMEKS">SAMEKS</a></li>
<li><a href="/tr/sozluk/Sanayi-Ciro-Endeksi">Sanayi Ciro Endeksi</a></li>
<li><a href="/tr/sozluk/Sanayi-Uretim-Endeksi">Sanayi Üretim Endeksi</a></li>
<li><a href="/tr/sozluk/Satinalma-Gucu-Paritesi">Satınalma Gücü Paritesi</a></li>
<li><a href="/tr/sozluk/Sektorel-Guven-Endeksi">Sektörel Güven Endeksi</a></li>
<li><a href="/tr/sozluk/Sermaye-Yeterlilik-Orani">Sermaye Yeterlilik Oranı</a></li>
<li><a href="/tr/sozluk/Sinir-Giris-Cikis-Istatistikleri">Sınır Giriş/Çıkış İstatistikleri</a></li>
</div>
<div class="group-class">
<div id="T">
<li class="glossary-titles-group pb-1 pt-1">T</li>
</div>
<li><a href="/tr/sozluk/Tarim-UFE">Tarım ÜFE</a></li>
<li><a href="/tr/sozluk/Tarimsal-Girdi-Fiyat-Endeksi">Tarımsal Girdi Fiyat Endeksi</a></li>
<li><a href="/tr/sozluk/TCMB-Beklenti-Anketi">TCMB Beklenti Anketi</a></li>
<li><a href="/tr/sozluk/TCMB-Bilancosu">TCMB Bilançosu</a></li>
<li><a href="/tr/sozluk/Ticari-Kredi-Buyumesi">Ticari Kredi Büyümesi</a></li>
<li><a href="/tr/sozluk/Toplam-Ciro-Endeksleri">Toplam Ciro Endeksleri</a></li>
<li><a href="/tr/sozluk/TUFE">TÜFE</a></li>
<li><a href="/tr/sozluk/TUFE---Cekirdek">TÜFE - Çekirdek</a></li>
<li><a href="/tr/sozluk/Tuketici-Guven-Endeksi">Tüketici Güven Endeksi</a></li>
<li><a href="/tr/sozluk/Turk-Is-Gida-Endeksi">Türk-İş Gıda Endeksi</a></li>
</div>
<div class="group-class">
<div id="U">
<li class="glossary-titles-group pb-1 pt-1">U</li>
</div>
<li><a href="/tr/sozluk/Uluslararasi-Rezervler-ve-Doviz-Likiditesi">Uluslararası Rezervler ve Döviz Likiditesi</a></li>
<li><a href="/tr/sozluk/Uluslararasi-Yatirim-Pozisyonu">Uluslararası Yatırım Pozisyonu</a></li>
<li><a href="/tr/sozluk/Uluslararasi-Yukumlulukler">Uluslararası Yükümlülükler</a></li>
</div>
<div class="group-class">
<div id="V">
<li class="glossary-titles-group pb-1 pt-1">V</li>
</div>
<li><a href="/tr/sozluk/Vergi-Tahakkuk-Tahsil-Orani">Vergi Tahakkuk / Tahsil Oranı</a></li>
</div>
<div class="group-class">
<div id="Y">
<li class="glossary-titles-group pb-1 pt-1">Y</li>
</div>
<li><a href="/tr/sozluk/Yabanci-Para-Mevduatlari">Yabancı Para Mevduatları</a></li>
<li><a href="/tr/sozluk/YD-UFE">YD-ÜFE</a></li>
<li><a href="/tr/sozluk/YI-UFE">Yİ-ÜFE</a></li>
<li><a href="/tr/sozluk/Yurtdisi-Yukumlulukler">Yurtdışı Yükümlülükler</a></li>
</div>
</ul><span class="visible-bottom"></span>
</div>
</div>
</div>
<div class="glossary-content p-3 mt-1-sm border-shadow">
<div tabindex="-1" style="outline: none;">
<div class="glossary-content-container ">
<h2>Finansal Kesim Dışı Firmaların Net Döviz Pozisyonu</h2>
<div class="d-flex flex-wrap justify-content-between mb-3 ">
<table>
<tr>
<td valign="top" class="glossary-content-container-title"><span style="font-size: 1rem;">Yayınlayan Kurum</span><span class="glossary-content-container-title-dots">:</span></td>
<td class="glossary-content-container-td">TCMB</td>
</tr>
<tr>
<td valign="top" class="glossary-content-container-title"><span style="font-size: 1rem;">İlk Yayınlanma Tarihi</span><span class="glossary-content-container-title-dots">:</span></td>
<td class="glossary-content-container-td">Aralık 2002</td>
</tr>
<tr>
<td valign="top" class="glossary-content-container-title"><span style="font-size: 1rem;">Periyodu</span><span class="glossary-content-container-title-dots">:</span></td>
<td class="glossary-content-container-td">Aylık</td>
</tr>
</table><img alt="Finansal Kesim Dışı Firmaların Net Döviz Pozisyonu" src="/images/glossary/risk/risk-2.png">
</div>
</div>
<div>
Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock,
bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de
Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan
"Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir. 1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de
1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan
2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini
incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak
kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir. 1500'lerden beri kullanılmakta olan standard Lorem Ipsum
metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.Yaygın inancın tersine, Lorem Ipsum
rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen
ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi
ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32
sayılı bölümdeki bir satırdan gelmektedir. 1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan
İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki
Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır.
Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde
çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir. 1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir.
Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45
tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan
'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve
1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.
1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden
yeniden üretilmiştir.
</div>
</div>
</div>Upvotes: 1
Burak Yücel
Reputation: 313
Add position: sticky; and top: 0; to the div element that you want to make sticky which has class="d-flex border-shadow" attribute.
Upvotes: 1
Related Questions
- My position: sticky element isn't sticky when using flexbox
- Position Sticky not working (inside Flexbox)
- (Yet Another) Flexbox & Position: Sticky
- CSS: Sticky, Flex and Overflow
- Sticky element not working in nested flex container with overflow (safari)
- Why isn't position:sticky with left:0 working inside a scrollable container?
- HTML & CSS: Sticky as overlay
- Why doesn't position:sticky work with flexbox?
- position: sticky not working within flexbox child
- Using Flexbox with position:sticky