របារខាងក្រោមជាប់

ដាក់សកម្មភាពសម្រេចចិត្តជាប់នៅបាតអេក្រង់ ដើម្បីកុំឲ្យត្រូវអានទំព័រវែងដល់ចប់ទើបអាចចុច។

មើលជាមុនផ្ទាល់

ប្រភព

HTML CSS

<div class="dc-stickyshell">
  <div class="dc-stickyshell__page">
    <p class="dc-stickyshell__line">용접 보조 — 경기 화성</p>
    <p class="dc-stickyshell__line">주 5일 · 오전 8시 ~ 오후 5시</p>
    <p class="dc-stickyshell__line">기숙사 제공, 점심 제공</p>
    <p class="dc-stickyshell__line">E-9 비자로 지원할 수 있습니다.</p>
    <p class="dc-stickyshell__line">교육 2주, 교육 기간에도 일당이 나옵니다.</p>
    <p class="dc-stickyshell__line">아래로 내려도 바는 자리에 남아 있습니다.</p>
  </div>
  <div class="dc-stickybar">
    <div class="dc-stickybar__info">
      <span class="dc-stickybar__label">월급</span>
      <strong class="dc-stickybar__price">280만원</strong>
    </div>
    <div class="dc-stickybar__actions">
      <button type="button" class="dc-stickybar__btn dc-stickybar__btn--ghost">저장</button>
      <button type="button" class="dc-stickybar__btn">지원하기</button>
    </div>
  </div>
</div>

.dc-stickyshell { position:relative; display:flex; flex-direction:column; height:300px; overflow:hidden; border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-bg); font-family:var(--dc-font); }
.dc-stickyshell__page { flex:1 1 auto; overflow-y:auto; padding:var(--dc-4); }
.dc-stickyshell__line { margin:0 0 var(--dc-5); font-size:14px; line-height:1.6; color:var(--dc-text-sub); }
.dc-stickybar { position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:var(--dc-4); padding:var(--dc-3) var(--dc-4); padding-bottom:calc(var(--dc-3) + var(--dc-safe-bottom)); border-top:1px solid var(--dc-line); background:var(--dc-surface); box-shadow:var(--dc-sh-2); }
.dc-stickybar__info { display:flex; flex-direction:column; min-width:0; }
.dc-stickybar__label { font-size:12px; color:var(--dc-text-mute); }
.dc-stickybar__price { font-size:17px; font-weight:700; color:var(--dc-text); }
.dc-stickybar__step { font-size:13px; font-weight:600; color:var(--dc-text-sub); }
.dc-stickybar__actions { display:flex; align-items:center; gap:var(--dc-2); flex-shrink:0; }
.dc-stickybar__btn { min-height:44px; padding:0 var(--dc-5); border:1px solid transparent; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:15px; font-weight:700; transition:background var(--dc-fast); }
.dc-stickybar__btn:hover { background:var(--dc-brand-hi); }
.dc-stickybar__btn--ghost { min-width:44px; background:var(--dc-surface); border-color:var(--dc-line-field); color:var(--dc-text); }
.dc-stickybar__btn--ghost:hover { background:var(--dc-sunken); }
.dc-stickybar--single { display:block; }
.dc-stickybar--single .dc-stickybar__btn { width:100%; }
@media (max-width:480px) {
  .dc-stickybar { flex-wrap:wrap; }
  .dc-stickybar__actions { flex:1 1 auto; }
  .dc-stickybar__btn { flex:1 1 auto; padding:0 var(--dc-3); }
}

របៀបប្រើ

ប៊ូតុងមួយ ច្រើនបំផុតពីរ — ដាក់ទីបី នឹងមិនដឹងថាមួយណាសំខាន់
មិនត្រូវដាក់តែប៊ូតុង; ដាក់លេខដែលត្រូវការសម្រាប់សម្រេចចិត្ត (សរុប ជំហាន) នៅក្បែរ
ពេលតម្លៃឬជំហានប្ដូរ របារត្រូវប្ដូរតាម — របារនេះគឺជាសេចក្ដីសង្ខេប

ចំណុចត្រូវប្រុងប្រយ័ត្ន

បន្ថែម --dc-safe-bottom ទៅចន្លោះខាងក្រោម បើមិនទេ សន្ទះ home នឹងបិទប៊ូតុង
រក្សាកន្លែងចុចឲ្យបាន ៤៤ ភិចសែលឬច្រើនជាង ហើយកុំធ្វើរបារថ្លាដល់អានអក្សរពីក្រោយបាន
ទុកចន្លោះខាងក្រោមទំព័រស្មើកម្ពស់របារ បើមិនទេ បន្ទាត់ចុងក្រោយនឹងនៅក្រោមរបារ

បន្ទាប់

គ្រោងអេក្រង់កម្មវិធី ប្លង់ កម្មវិធី

ក្បាលទំព័របត់ពេលរំកិល ប្លង់ កម្មវិធី

ជង់កាត ប្លង់ កម្មវិធី

ជួរដេករំកិលផ្ដេក ប្លង់ កម្មវិធី