CSS / Fixed ба sticky position

Fixed ба sticky position

fixed болон sticky хоёулаа scroll-тай холбоотой байрлал юм. Вэбийн нийтлэг UI загваруудыг — navbar, sidebar, "дээш буцах" товч — эдгээр property-ийн тусламжтайгаар бүтээдэг.

position: fixed

Элемент viewport-т харьцангуй байрладаг. Scroll хийхэд хуудас хөдөлсөн ч элемент дэлгэцийн нэг байрт хөдөлгөөнгүй байна. Хуудасны ердийн урсгалаас гарна — зай эзэлдэггүй.

css

.navbar {
  position: fixed;
  top: 0; /* дэлгэцийн дээд хэсэгт наалдах */
  left: 0;
  right: 0; /* бүтэн өргөн */
  height: 64px;
  background-color: rgba(11, 17, 32, 0.9);
  border-bottom: 1px solid #1e293b;
  z-index: 100; /* бусад элементийн дээр байх */
  backdrop-filter: blur(8px);
}

Fixed navbar байх үед хуудасны агуулга navbar-ын доор нуугддаг. Үүнийг засахын тулд:

css

/* Navbar-ын өндрөөр дээд padding нэмэх */
body {
  padding-top: 64px;
}

/* Эсвэл main агуулгад */
main {
  margin-top: 64px;
}

"Дээш буцах" товч

css

.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #a78bfa;
  color: #0b1120;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

css

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* viewport бүхнийг бүрхэх */
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-box {
  position: relative; /* modal дотоод absolute хүүхдийн тулгуур */
  background-color: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 16px;
  padding: 32px;
  width: 90%;
  max-width: 480px;
  z-index: 201;
}

position: sticky

Элемент хэвийн урсгалд байсаар байна — гэхдээ scroll хийх үед тодорхой threshold (босго) давсан цагт viewport дахь тогтмол байрлалд "наалдана". Тухайн хэсгийн эцэс хүртэл наалдсан байгаад дахин урсгалдаа ордог.

css

.section-header {
  position: sticky;
  top: 0; /* scroll хийхэд дэлгэцийн дээд хэсэгт наалдана */
  background-color: #0b1120;
  padding: 16px 0;
  z-index: 10;
}

Fixed vs sticky харьцуулалт

| | fixed | sticky | | --------------- | --------------------- | ------------------------- | | Урсгалаас гарах | Тийм — зай эзэлдэггүй | Үгүй — зай эзэлсэн хэвээр | | Харьцах цэг | Viewport | Эцэг элемент + viewport | | Хязгаарлалт | Байхгүй | Эцэг элементийн дотор | | Хэрэглээ | Navbar, modal | Section header, sidebar |

css

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start; /* чухал: stretch биш start байх ёстой */
}

.sidebar {
  position: sticky;
  top: 80px; /* fixed navbar-аас 16px доор */
  max-height: calc(100vh - 96px); /* дэлгэцийн өндрөөс хэтрэхгүй */
  overflow-y: auto;
}

Sticky хүснэгтийн толгой

css

.table-container {
  max-height: 400px;
  overflow-y: auto; /* гүйлгэх боломжтой контейнер */
}

table th {
  position: sticky;
  top: 0; /* гүйлгэхэд толгой дээр үлдэнэ */
  background-color: #0f172a;
  z-index: 5;
}

Нийтлэг sticky асуудал

sticky ажиллахгүй байвал дараахийг шалгана:

css

/* 1. top/bottom утга заавал байх ёстой */
.sticky {
  position: sticky;
  top: 0;
} /* зөв */
.sticky {
  position: sticky;
} /* top байхгүй — ажиллахгүй */

/* 2. Эцэг элемент overflow: hidden/auto биш байх ёстой */
.parent {
  overflow: visible; /* sticky-г өдөөдөг overflow утга тохируулж болохгүй */
}

/* 3. Эцэг элемент хангалттай өндөртэй байх ёстой */
.parent {
  min-height: 200vh; /* sticky-д scroll хийх зай хэрэгтэй */
}

Бүтэн навигацийн жишээ

css

/* Fixed navbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background-color: rgba(11, 17, 32, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #1e293b;
  display: flex;
  align-items: center;
  padding: 0 24px;
  z-index: 100;
}

/* Navbar-ийн дараах агуулга нуугдахгүйн тулд */
.page-content {
  padding-top: 64px;
}

/* Дотор хуудасны sticky дэд навигац */
.sub-nav {
  position: sticky;
  top: 64px; /* navbar-ийн дараа шууд наалдана */
  background-color: #0b1120;
  border-bottom: 1px solid #1e293b;
  padding: 0 24px;
  z-index: 50;
}

Дараагийн хичээлд:

CSS layout-ийн хувьсгалт хэрэгсэл — Flexbox-ийн үндсийг судална. display: flex, flex-direction, flex-wrap, main axis болон cross axis гэж юу болох талаар практик жишээгээр авч үзнэ.

← Өмнөх хичээлPosition (static, relative, absolute)Дараах хичээл →Flexbox үндэс