Source

ቦታ

ነዞም ናይ ሓጺር ጽሑፍ ዩቲሊቲታት ንኣቀማምጣ ሓደ ባእታ ብቕልጡፍ ንምውቃር ተጠቐመሎም።

ናይ ሓባር ክብርታት

ቅልጡፍ ናይ ኣቀማምጣ ክፍልታት ዋላ እኳ ምላሽ ዝህቡ እንተዘይኮኑ ኣለዉ።

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

ጽኑዕ ላዕለዋይ ክፋል

ሓደ ባእታ ኣብ ላዕሊ ናይቲ ቪውፖርት ኣቐምጦ፣ ካብ ወሰን ናብ ወሰን። ኣብ ፕሮጀክትካ ውሱን መርገጺ ዘለዎ ጨናፍር ከም ዝተረዳእካዮ ኣረጋግጽ፤ ተወሳኺ CSS ክትውስኽ ከድልየካ ይኽእል እዩ።

<div class="fixed-top">...</div>

ጽኑዕ ታሕተዋይ ክፋል

ሓደ ባእታ ኣብ ታሕቲ ናይቲ ቪውፖርት ኣቐምጦ፣ ካብ ወሰን ናብ ወሰን። ኣብ ፕሮጀክትካ ውሱን መርገጺ ዘለዎ ጨናፍር ከም ዝተረዳእካዮ ኣረጋግጽ፤ ተወሳኺ CSS ክትውስኽ ከድልየካ ይኽእል እዩ።

<div class="fixed-bottom">...</div>

ተጣባቒ ላዕለዋይ ክፋል

ንሓደ ባእታ ኣብ ላዕሊ ናይቲ ቪውፖርት ኣቐምጦ፣ ካብ ወሰን ናብ ወሰን፣ ግን ምስ ሓለፍካዮ ጥራይ። እቲ .sticky-topዩቲሊቲ CSS's ይጥቀም position: sticky፣ እዚ ድማ ኣብ ኩሎም ዳህሰስቲ ምሉእ ብምሉእ ኣይድገፍን እዩ።

IE11ን IE10ን position: stickyከም position: relative. ከምኡ ስለዝኾነ ድማ፡ ነቶም ቅዲታት ኣብ ሓደ @supportsሕቶ ንጠቕልሎም፡ ነቲ ተጣባቒነት ኣብ ብግቡእ ከቕርቡዎ ዝኽእሉ ዳህሰስቲ ጥራይ ኢና ንድርቶ።

<div class="sticky-top">...</div>