0
Kayıt Ol

Css Belirli Yere Kadar Sidebar Sayfayı Takip ettirme

8

●

62

  • 20-04-2021, 22:41:44
    #1
    KarayelHosting
    KarayelHosting
    Merhabalar,
    Benim Bir kutum var ve bu kutunun içinde sidebarım var
    kutunun sonuna kadar takip etmesini istiyorum ama kutunun dışına çıkmasını istemiyorum position:fixed ile bütün sayfayı takip ediyor.
    Bunu nasıl yapabilirim ve ya ne diye aratabilirim internetten yardımcı olabilirmisiniz

    html Kodum
    <html>
<head>
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<header>
<ul class="menu">
<li class="menu-item">Ana Sayfa</li>
<li class="menu-item">Kategoriler</li>
<li class="menu-item">Blog</li>
</ul>
</header>

<main class="kutu">
<div class="icerik">
İçerik1
</div>
<div class="icerik">
İçerik2
</div>
<div class="icerik">
İçerik3
</div>
<div class="icerik">
İçerik4
</div>
<div class="icerik">
İçerik5
</div>
<div class="icerik">
İçerik6
</div>
<div class="icerik">
İçerik7
</div>
<div class="sidebar">
<div class="sidebar-main">
<div class="sidebar-title">Yeni Yazılar</div>
<div class="sidebar-icerik">İçerik1</div>
<div class="sidebar-icerik">İçerik2</div>
<div class="sidebar-icerik">İçerik3</div>
<div class="sidebar-icerik">İçerik4</div>
</div>
<div class="sidebar-main">
<div class="sidebar-title">Diğer</div>
<div class="sidebar-icerik">Kayıt Ol</div>
<div class="sidebar-icerik">Giriş Yap</div>
<div class="sidebar-icerik">Blog</div>
<div class="sidebar-icerik">Forum</div>
</div>
</div>
</main>
<main class="kutu">
<div class="icerik">
İçerik1
</div>
<div class="icerik">
İçerik2
</div>
<div class="icerik">
İçerik3
</div>
<div class="icerik">
İçerik4
</div>
</main>
<main class="kutu">
<div class="icerik">
İçerik1
</div>
<div class="icerik">
İçerik2
</div>
<div class="icerik">
İçerik3
</div>
<div class="icerik">
İçerik4
</div>
</main>

<main class="kutu">
<div class="icerik">
İçerik1
</div>
<div class="icerik">
İçerik2
</div>
<div class="icerik">
İçerik3
</div>
<div class="icerik">
İçerik4
</div>
</main>
<footer>
</footer>
</body>
    Main.Css İçeriğim : 
    .sidebar {
position:fixed;right:8px;top:42px;}
.kutu {
background:#2b2626;
color:white;
margin-bottom:50px;
}
.menu {display:flex;}
.menu-item {margin-right:55px;list-style:none;}
.icerik {
padding:15px;}
.sidebar-icerik {
margin-bottom:15px;}
.sidebar-title {
background:red;}
    Yapmak İstediğim Açıkcası Şu :


    Resimdeki Yerin kutu dışına çıkmaması ama kutunun içinde hareket etmesi
  • Kabul Edilen Cevap
  • 20-04-2021, 22:51:32
    #2
    maskot45
    maskot45
    position:fixed yerine
    position:sticky yapmayı denedin mi?

    Kutuya bağımlı olsun onun dışına çıkmasın istiyorsan bulunduğu kutuya position: relative deyip sınır koyabilirsin, içindeki elementler kendi içerisinde pozisyonlandırılır.


    https://www.w3schools.com/howto/howt...ky_element.asp
  • 20-04-2021, 22:55:45
    #3
    KarayelHosting
    KarayelHosting
    maskot45 adlı üyeden alıntı: mesajı görüntüle
    position:fixed yerine
    position:sticky yapmayı denedin mi?

    Kutuya bağımlı olsun onun dışına çıkmasın istiyorsan bulunduğu kutuya position: relative deyip sınır koyabilirsin, içindeki elementler kendi içerisinde pozisyonlandırılır.


    https://www.w3schools.com/howto/howt...ky_element.asp
    Yaptım Fakat Böyle Oluyor ;
  • 20-04-2021, 22:58:40
    #4
    maskot45
    maskot45
    Peki boyut vermeyi denedin mi
    Width değeri geçersen olabilir
    Gönderdiğin CSS te boyut vermemişsin
  • 20-04-2021, 23:06:02
    #5
    KarayelHosting
    KarayelHosting
    maskot45 adlı üyeden alıntı: mesajı görüntüle
    position:fixed yerine
    position:sticky yapmayı denedin mi?

    Kutuya bağımlı olsun onun dışına çıkmasın istiyorsan bulunduğu kutuya position: relative deyip sınır koyabilirsin, içindeki elementler kendi içerisinde pozisyonlandırılır.


    https://www.w3schools.com/howto/howt...ky_element.asp
    maskot45 adlı üyeden alıntı: mesajı görüntüle
    Peki boyut vermeyi denedin mi
    Width değeri geçersen olabilir
    Gönderdiğin CSS te boyut vermemişsin
    Cevaplarınız için teşekkür ederim olmadı yine malesef böyle yaptım css i
    .sidebar {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
right:8px;
width:80px;
height:80px;
top:42px;
}
  • 20-04-2021, 23:08:14
    #6
    maskot45
    maskot45
    Bilgisayara geçeyim bide ben deneyim
    Bi çözüm bulursam yazarım
  • 20-04-2021, 23:55:03
    #7
    Bu cevap, konu sahibi tarafından kabul edilebilir bir cevap olarak işaretlendi.
    maskot45
    maskot45
    Sanırım istediğin buydu

    https://www.w3schools.com/code/tryit...e=GPQVZRROKW2S
  • 21-04-2021, 00:00:56
    #8
    KarayelHosting
    KarayelHosting
    maskot45 adlı üyeden alıntı: mesajı görüntüle
    Sanırım istediğin buydu

    https://www.w3schools.com/code/tryit...e=GPQVZRROKW2S
    Evet Buydu Teşekkür ederim
  • 21-04-2021, 00:02:27
    #9
    maskot45
    maskot45
    Rica ederim iyi kodlamalar