Dərslər
Başlamaq
Öyrənməyə başlayın
CodeGym /Kurslar /Frontend SELF AZ /Yapışqan mövqe

Yapışqan mövqe

Frontend SELF AZ
Səviyyə , Dərs
Mövcuddur

6.1 position: sticky

CSS-də lipçapqılı mövqeləndirmə (position: sticky) nisbi və sabit mövqeləndirmə xüsusiyyətlərini birləşdirir. Lipçapqılı mövqeləndirməyə malik elementlər nisbətən mövqeləndirilmiş kimi davranır, müəyyən sürüşmə həddinə çatdıqda isə sabit mövqelənir.

Lipçapqılı mövqeləndirmənin xüsusiyyətləri:

  • position: sticky ilə olan element müəyyən sürüşmə mövqeyinə çatana qədər nisbətən mövqeləndirilmiş kimi davranır
  • Müəyyən həddə çatdıqda element sabit olur və başqa sürüşmə həddi keçilənə qədər orda qalır
  • Lipçapqılı mövqeləndirmə yalnız valideyn konteynerin içərisində işləyir. Valideyn konteyner görüntüləmə sahəsindən çıxdıqda, lipçapqılı element sabit xüsusiyyətlərini itirir

Lipçapqılı Mövqeləndirmənin Sintaksisi

Lipçapqılı mövqeləndirməni tətbiq etmək üçün position: sticky və koordinatlar top, right, bottom və ya left istinad nöqtəsini müəyyən etmək üçün istifadə olunur. 

    
      .element {
        position: sticky;
        top: value;
        right: value;
        bottom: value;
        left: value;
      }

Burada:

  • top: Brauzerin yuxarı kənarından elementin yuxarı kənarına qədər olan məsafə
  • right: Brauzerin sağ kənarından elementin sağ kənarına qədər olan məsafə
  • bottom: Brauzerin aşağı kənarından elementin aşağı kənarına qədər olan məsafə
  • left: Brauzerin sol kənarından elementin sol kənarına qədər olan məsafə

Nümunə:

CSS 
    
      .wrapper {
        height: 200px;
        overflow: auto;
      }

      .header {
        position: sticky;
        top: 0;
        background-color: deepskyblue;
        padding: 10px;
        font-size: 24px;
        color: white;
      }

      .content {
        margin-top: 25px;
        background-color: lightgrey;
        padding: 20px;
      }
HTML 
    
      <div class="wrapper">
        <div class="header">Sticky Header</div>
        <div class="content">
          Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
          Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
          Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
          Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
          Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
          Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
        </div>
      </div>

Bu nümunədə, .header sinifinə malik başlıq səhifə sürüşdürülərkən yuxarı kənarı görüntüləmə pəncərəsinin yuxarı kənarına çatana qədər öz mövqeyini saxlayacaq.

6.2 Yapışqan yerləşdirmənin üstünlükləri və çatışmazlıqları

Yapışqan yerləşdirmənin üstünlükləri

  1. İstifadəçi interfeysinin yaxşılaşdırılması:
    • Başlıqlar, naviqasiya panelləri və yan panellər kimi yapışqan elementlər uzun səhifələrdə naviqasiyanı və məzmunun əlçatanlığını yaxşılaşdırır, istifadəçi üçün görünən qalır
  2. Nisbi və sabit yerləşdirmənin üstünlüklərinin birləşməsi:
    • Yapışqan yerləşdirmə, elementlərin sənəd axınında qalmasına, onların nisbi vəziyyətini saxlamasına imkan verir, sürüşdürmə həddi çatana qədər. Bu, elementlərin daha təbii davranışını təmin edir
  3. Sadə tətbiqetmə:
    • Yapışqan yerləşdirmə minimal kodla və JavaScript-dən istifadə etmədən asanlıqla həyata keçirilir

Yapışqan yerləşdirmənin çatışmazlıqları

  1. Köhnə brauzerlərdə məhdud dəstək:
    • Yapışqan yerləşdirmə müasir brauzerlərin əksəriyyəti tərəfindən dəstəklənir, lakin köhnə brauzer versiyalarında işləməyə bilər, bu isə uyğunluq üçün əlavə həllər tələb edə bilər
  2. Valideyn konteynerlərdən asılılıq:
    • Yapışqan yerləşdirmə yalnız valideyn konteynerin daxilində işləyir. Əgər valideyn konteyner baxış sahəsinin hüdudlarından kənara çıxırsa, yapışqan element sabit xüsusiyyətlərini itirir
  3. Məzmunun örtülməsi problemləri:
    • Yapışqan elementlər səhifədəki digər elementləri örtə bilər, əgər onların hündürlüyü və ya eni dizayn zamanı nəzərə alınmazsa

6.3 Yapışqan tərtibatın istifadə nümunələri

1. Yapışqan yan panel

Məzmunu sürüşdürərkən görünən qalan yapışqan yan panel yaradılması.

CSS 
    
      .wrapper {
        height: 200px;
        overflow: auto;
      }

      .container {
        display: flex;
      }

      .sidebar {
        position: sticky;
        top: 0;
        left: 0;
        width: 200px;
        height: 100px;
        background-color: lightgreen;
        padding: 10px;
      }

      .content {
        background-color: lightgrey;
        padding: 20px;
      }
HTML 
    
      <div class="wrapper">
        <div class="container">
          <div class="sidebar">Yapışqan Yan Panel</div>
          <div class="content">
            Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
            Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
            Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
            Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
            Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
            Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
          </div>
        </div>
      </div>

Bu nümunədə .sidebar sinifi olan yan panel məzmun sürüşdürülərkən yerində qalacaq.

2. Cədvəl başlığının yapışqanlığı

Çoxlu məlumatlarla işləyərkən görünən qalacaq yapışqan cədvəl başlığı yaradılması.

CSS 
    
        .wrapper {
          height: 200px;
          overflow: auto;
        }

        table {
          width: 100%;
          border-collapse: collapse;
        }

        th, td {
          padding: 10px;
          border: 1px solid #ddd;
        }

        th {
          position: sticky;
          top: 0;
          background-color: deepskyblue;
          color: white;
        }

        tbody {
          min-height: 300px;
          display: block;
        }

        tbody tr {
          display: table;
          width: 100%;
          table-layout: fixed;
        }
HTML 
    
      <div class="wrapper">
        <table>
          <thead>
            <tr>
              <th>Başlıq</th>
            </tr>
          </thead>
          <tbody>
            <tr><td>Məlumat 1</td><td>Məlumat 2</td><td>Məlumat 3</td></tr>
            <tr><td>Məlumat 1</td><td>Məlumat 2</td><td>Məlumat 3</td></tr>
            <tr><td>Məlumat 1</td><td>Məlumat 2</td><td>Məlumat 3</td></tr>
            <tr><td>Məlumat 1</td><td>Məlumat 2</td><td>Məlumat 3</td></tr>
            <tr><td>Məlumat 1</td><td>Məlumat 2</td><td>Məlumat 3</td></tr>
            <tr><td>Məlumat 1</td><td>Məlumat 2</td><td>Məlumat 3</td></tr>
            <tr><td>Məlumat 1</td><td>Məlumat 2</td><td>Məlumat 3</td></tr>
            <tr><td>Məlumat 1</td><td>Məlumat 2</td><td>Məlumat 3</td></tr>
            <tr><td>Məlumat 1</td><td>Məlumat 2</td><td>Məlumat 3</td></tr>
            <tr><td>Məlumat 1</td><td>Məlumat 2</td><td>Məlumat 3</td></tr>
            <tr><td>Məlumat 1</td><td>Məlumat 2</td><td>Məlumat 3</td></tr>
            <tr><td>Məlumat 1</td><td>Məlumat 2</td><td>Məlumat 3</td></tr>
          </tbody>
        </table>
      </div>

Bu nümunədə cədvəl başlığı məzmunu sürüşdürərkən yerində qalacaq.

Şərhlər
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION