तल अडिने बार
लामो पृष्ठ अन्तिमसम्म नपढेर पनि निर्णयको बटनमा हात पुग्नुपर्दा पर्दाको तल टाँसिने टुक्रा।
प्रत्यक्ष पूर्वावलोकन
स्रोत
<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 जोड्नु, नत्र होम इन्डिकेटरले बटन छोप्छ
- थिच्ने उचाइ ४४ पिक्सेलभन्दा घटी नबनाउनु, र बार पछाडिको अक्षर पढिने गरी पारदर्शी नबनाउनु
- बारले छोप्ने जति खाली ठाउँ पृष्ठको तल छोड्नु, नत्र अन्तिम लाइन बारमुनि पर्छ