Вэбсайт үүсгэхдээ сайтын үндсэн чиглүүлэгчийг агуулсан хэвтээ цэсийг байнга харах шаардлагатай байдаг. Хэвтээ цэсийг "засах" арга нь дугуйг хэчнээн доош, дээшээ эргүүлсэнээс үл хамааран "навигац үргэлж гарт байдаг" зочдод тохиромжтой.

CSS-ээр хэвтээ цэсийг засах: байрлал: тогтмол

Нэг талаас, бүх зүйл энгийн бөгөөд CSS ашиглан богино хугацаанд шийдвэрлэхэд хялбар байдаг. Тогтмол хэвтээ цэсийн HTML байршлын жишээ:

• гэр
• Мэдээ
• Харилцагчид
• Хайх

[хуудасны агуулга] [сайтын хөл хэсэг]

Тогтмол хэвтээ цэсийн CSS зохион байгуулалт:

# цэс-дээд-бараг-тогтмол(байрлал: тогтмол; дээд: 10px; зүүн: 0; өндөр: 30px; өргөн: 100%; зах: 0; )

Одоо хуудасны агуулгын догол мөрийг цэсийн өндөртэй тэнцүү болгоцгооё.

#контент (дээд талын захын зай: 30px; )

Одоо бид "бараг" амжилтанд хүрсэн. Цэс нь зочдод үргэлж харагддаг. Гэхдээ дизайн дээрээ сайтын толгой хэсэг, дараа нь цэс өөрөө, толгой хэсэгт лого, сайтын уриа, баннер байгаа бол бид яах ёстой вэ.

За, бид контентын догол мөрийг толгой болон цэстэй тэнцүү болгож, тэдгээрийн хоорондох доголын хамт сайтын толгой хэсгийг засах боломжтой. Гэхдээ асуудал үүсдэг. Бид зочдод хуудасны агуулгыг үзэхийн тулд үзэх зайг ихээхэн хязгаарладаг. Малгайгаа орхих сонголт бидэнд огт тохирохгүй байна.

Javascript ашиглан хэвтээ цэсийг засах

Тиймээс, цэс нь сайтын толгойн ард "явж" байх үед сонголтыг авч үзье, гэхдээ хэрэв зочин идэвхтэй доош гүйлгэж байвал цэс дээд талд "засах" бөгөөд байрандаа хэвээр үлдэнэ. Сайтын толгой хэсэг харагдахгүй байна. Хэрэв зочин хуудасны толгой хэсэгт буцаж очвол цэс нь "сайтын толгойн ард" байрандаа "болно". Эхлэхийн тулд, жишээ хуудасны байршлын бүрэн HTML байршлыг энд харуулав.

Вэб сайтын лого Вэб сайт уриа Баннер

• гэр
• Мэдээ
• Харилцагчид
• Хайх

[хуудасны агуулга] [сайтын хөл хэсэг]

Манай вэбсайтын загвар нь хэд хэдэн ердийн хэсгээс бүрдэнэ:

• сайтын толгой хэсэг - #толгой, өндөр 150px
• хэвтээ цэс - # цэсний дээд хэсэгт бараг л тогтсон- өндөр 30px,
• хуудасны мэдээллийн үндсэн хэсэг - #контент,
• сайтын хөл - #хөл.

CSS-ийн зохион байгуулалт энд байна:

#цэс-дээд-бараг-тогтмол( байрлал: тогтмол; зах: 0; зүүн: 0; дээд: 150 пиксел; өндөр: 30 пиксел; ) # толгой( дэлгэц: блок; өндөр: 150 пиксел; халих: далд; байрлал: харьцангуй; захын зай -доод: 55px; ) #цэс-дээд-бараг-тогтмол ul, #цэс-дээд-бараг-тогтмол li( list-style: none; margin: 0; padding: 0; ) #menu-top-almost-fixed ul (дэлгэц: блок; текстийг зэрэгцүүлэх: голд; өргөн: 100%; хөвөх: зүүн; ) #цэс-дээд-бараг тогтмол ul li(дэлгэц: inline; шугамын өндөр: 30px; өргөн: 120px; дүүргэлт: 0 5px ; текстийг зэрэгцүүлэх: төвд; )

Эхлээд цэсийнхээ өндөртэй тэнцэх контентын толгойноос догол мөр + гоо зүйн гоо сайхны хувьд жижиг догол оруулъя. #толгой (доод захын зай: 55px; ). Гарчгийн ард цэсээ засъя: #menu-top-almost-fixed( байрлал: тогтмол; захын зай: 0; зүүн: 0; дээд: 150px; өндөр: 30px; ) .

Одоо гүйлгэх үед цэс яг хуудасны дээд талд "засаж" байгаа эсэхийг шалгацгаая. Дараах javascript-ийг болон хоёрын хооронд оруулъя:

Javascript:

var m1 = 150; /* толгой хэсгийн өндөр пикселээр */ var m2 = 2; /* гүйлгэх үед толгой хэсэг харагдахгүй болсон догол */ var menuID = "menu-top-almost-fixed"; /* бэхлэх хэвтээ цэсийн id */ var menuOpacityOnChange = "0.7"; /* гүйлгэх үед цэсийн ил тод байдал: 1 - тунгалаг бус, 0.5 - тунгалаг 0.0 - бүрэн ил тод */ var menuOpacityOnChangeIE = menuOpacityOnChange * 100; /* баримтын дээд хэсгээс гүйлгэх гүйлгээний одоогийн байрлал хүртэлх догол мөрийг хөтчөөр тодорхойлох функц */ функц getScrollTop() ( var scrOfY = 0; if(typeof(window.pageYOffset) == "тоо" ) ( //Netscape нийцтэй scrOfY = window.pageYOffset ; ) else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) ( //DOM нийцтэй scrOfY = document.body.scrollTop; ) else if(document.documentElement && (document.documentElement. scrollLeft || document.documentElement.scrollTop)) ( //IE6 Strict scrOfY = document.documentElement.scrollTop; ) буцах scrOfY; ) /* хөвөгч файлын дээд дэвсгэрийг тохируулдаг функц гүйлгэх байрлал болон харагдах байдлын толгой хэсгээс хамааран тогтмол хэвтээ цэс */ функц marginMenuTop() ( var top = getScrollTop(); var s = document.getElementById(menuID); if(typeof s != "тодорхойгүй" && s)( if (дээд) +м2< m1) { s.style.top = (m1-top) + "px"; s.style.filter = s.style.filter.replace("progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")",""); s.style.opacity = "1"; } else { s.style.top = m2 + "px"; s.style.opacity = menuOpacityOnChange; s.style.filter = s.style.filter.replace("progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")",""); s.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")"; } } } /** функция регистрирует вычисление позиции «плавающего» меню при прокрутке страницы **/ function setMenuPosition(){ if(typeof window.addEventListener != "undefined"){ window.addEventListener("scroll", marginMenuTop, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onscroll", marginMenuTop); } marginMenuTop(); } /** регистрируем вызов необходимых функций после загрузки страницы **/ if(typeof window.addEventListener != "undefined"){ window.addEventListener("load", setMenuPosition, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onload", setMenuPosition); }

Та энэ холбоосыг дагаж, гүйлгэх дугуй ашиглан хэрэгжүүлэлтийн жишээг харж болно. Тиймээс энд бүх зүйл энгийн байдаг. Тохиргоонд бид дараах параметрүүдийг скрипт рүү дамжуулдаг.

• var m1 = 150; - толгой хэсгийн өндөр пикселээр,
• var m2 = 2; - гүйлгэх үед толгой хэсэг харагдахаа больсон догол,
• var menuID = "цэс дээд талд бараг л тогтсон"; - бэхлэх хэвтээ цэсийн id,
• var menuOpacityOnChange = “0.7”; - гүйлгэх үед цэсийн ил тод байдал:
  • 1 - тунгалаг
  • 0.5 - тунгалаг
  • 0.0 - бүрэн ил тод

Энэ хувилбарт бид цэсээ бага зэрэг "тохируулсан" бөгөөд гүйлгэх үед бид түүнд тунгалаг байдлыг нэмж өгдөг. Цэсийн ил тод байдлыг өөрчлөхгүй, харин цэсний өнгө, доод тунгалаг хүрээ бүхий дэвсгэр хэлбэрээр цэсний дэвсгэрийг хийхэд илүү сонгодог сонголт шууд гарч ирнэ (үүний градиент жигд шилждэг). ” тунгалаг өнгөнөөс тунгалаг хүртэл):

Хэвтээ тогтмол цэсийнхээ CSS-ийн бүдүүвчийг бага зэрэг өөрчилье:

#цэс-дээд-бараг-тогтмол( байрлал: тогтмол; захын зай: 0; зүүн: 0; дээд: 150px; өндөр: 30px; дэвсгэр: url(./images/white-gradient-l.png) зүүн доод давталт-x ;)

Одоо өөрчилсөн javascript кодыг өгцгөөе, бид үүнийг болон хооронд байрлуулна:

Javascript:

var m1 = 150; /* толгой хэсгийн өндөр пикселээр */ var m2 = 0; /* гүйлгэх үед толгой хэсэг харагдахаа больсон догол */ var menuID = "menu-top-almost-fixed"; /* баримтын дээд хэсгээс гүйлгэх гүйлгээний одоогийн байрлал хүртэлх догол мөрийг хөтчөөр тодорхойлох функц */ функц getScrollTop() ( var scrOfY = 0; if(typeof(window.pageYOffset) == "тоо" ) ( //Netscape нийцтэй scrOfY = window.pageYOffset ; ) else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) ( //DOM нийцтэй scrOfY = document.body.scrollTop; ) else if(document.documentElement && (document.documentElement. scrollLeft || document.documentElement.scrollTop)) ( //IE6 Strict scrOfY = document.documentElement.scrollTop; ) буцах scrOfY; ) /* хөвөгч файлын дээд дэвсгэрийг тохируулдаг функц гүйлгэх байрлал болон харагдах байдлын толгой хэсгээс хамааран тогтмол хэвтээ цэс */ функц marginMenuTop() ( var top = getScrollTop(); var s = document.getElementById(menuID); if(typeof s != "тодорхойгүй" && s)( if (дээд) +м2< m1) { s.style.top = (m1-top) + "px"; } else { s.style.top = m2 + "px"; } } } /** функция регистрирует вычисление позиции «плавающего» меню при прокрутке страницы **/ function setMenuPosition(){ if(typeof window.addEventListener != "undefined"){ window.addEventListener("scroll", marginMenuTop, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onscroll", marginMenuTop); } } /** регистрируем вызов необходимых функций после загрузки страницы **/ if(typeof window.addEventListener != "undefined"){ window.addEventListener("load", setMenuPosition, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onload", setMenuPosition); }

Тиймээс энд бүх зүйл энгийн байдаг. Тохиргоонд бид дараах параметрүүдийг скрипт рүү дамжуулдаг.

• var m1 = 150; - толгой хэсгийн өндөр пикселээр,
• var m2 = 0; - гүйлгэх явцад толгой хэсэг харагдахаа больсон догол мөр.

Цэс нь сайн ажилладаг, гэхдээ та хуудсыг дахин ачаалвал цэс эхний догол мөртэй гарч ирнэ

Хэрэв ийм асуудал гарвал хуудсыг нэг удаа ачаалсны дараа цэс рүү залгах хэрэгтэй. Үүнийг хийхийн тулд функц дуудлагын кодыг дараахаас өөрчилнө үү:

Функц setMenuPosition())( if(typeof window.addEventListener != "тодорхойгүй")( window.addEventListener("scroll", marginMenuTop, худал); ) else if(typeof window.attachEvent != "тодорхойгүй")( цонх. attachEvent ("onscroll", marginMenuTop); ) );

Дараах код руу:

Функц setMenuPosition())( if(typeof window.addEventListener != "тодорхойгүй")( window.addEventListener("scroll", marginMenuTop, худал); ) else if(typeof window.attachEvent != "тодорхойгүй")( цонх. attachEvent ("onscroll", marginMenuTop); ) marginMenuTop(); );

Хуудсыг ачаалсны дараа бид нэн даруй marginMenuTop функцийг дууддаг бөгөөд энэ нь хуудсан дээрх цэсийн байрлалыг шалгаж, хүссэн хэв маягийг ашиглах болно.

Twitter Bootstrap-ийн Afixx jQuery залгаасыг ашиглан хэсэгчлэн тогтсон цэсийг хэрэгжүүлж байна

Энэ сэдвийн үргэлжлэлд Twitter Bootstrap фреймворкийн jQuery Affix залгаасыг ашиглан бараг тогтмол цэсийг хэрэгжүүлэх талаар танд зориулж нийтлэл бичсэн.

Блогууд болон бусад эх сурвалжуудын хуудаснаас илүү олон удаа олддог. Ийм навигацийн баар ашиглах нь нэлээд үндэслэлтэй юм. Эдгээр jQuery залгаасуудыг идэвхтэй ашиглах гол шалтгаануудын нэг нь цэс нь хуудасны доод хэсэгт байсан ч гэсэн үргэлж зочдын гарт байдагт оршино. Үүнээс гадна, тогтмол цэс бага зай эзэлдэг бөгөөд гол агуулгаас анхаарлыг сарниулдаггүй. Ерөнхийдөө тогтмол цэс нь сайтын ашиглалтыг сайжруулдаг.
Би тогтмол цэсийг хэрэгжүүлэхэд зориулсан хамгийн шилдэг, миний бодлоор үнэгүй jQuery залгаасуудыг цуглуулсан. Би залгаас бүрийг ямар нэг байдлаар өвөрмөц байлгахыг хичээсэн бөгөөд ингэснээр сонгогдсон ямар ч залгаасыг таны төсөлд тусгайлан ашиглаж болно. Цуглуулгаас та хөдөлгөөнт дүрс бүхий энгийн, илүү төвөгтэй залгаасуудыг олох боломжтой.
Хэрэв танд маш энгийн тогтмол цэс хэрэгтэй бол бид нийгмийн товчлуур бүхий наалдамхай самбарыг хэрхэн хэрэгжүүлсэн гэх мэт зүйлийг jQuery залгаасгүйгээр хийж болно, учир нь хуудсыг скриптээр ачаалах нь тийм ч сайн биш боловч бид дараагийн нийтлэлүүдэд энэ талаар ярих болно. Сонирхолтой материалыг алдахгүйн тулд манай суваг эсвэл хуудсанд бүртгүүлээрэй.
Тэгэхээр. Тогтмол цэс үүсгэх 6 jQuery залгаас энд байна.

Наалттай толгойг автоматаар нуух jQuery суурин навигацийн залгаас нь дээрх скрипттэй төстэй зарчмаар ажилладаг боловч жигд биш боловч эхлээд харахад арай хялбар байдаг. Харамсалтай нь, навигаци нь бүрэн дасан зохицсон гэж би хэлж чадахгүй, учир нь жижиг дэлгэц дээр цэсийн зүйлүүд зүгээр л тоо болж хувирдаг нь маш хачирхалтай юм.

On Scroll Header Effects Тогтмол навигацийн самбарт зориулсан Powerful jQuery залгаас. Хуудас дээр гүйлгэж байхдаа тодорхой сегментүүдийг тохируулах боломжтой бөгөөд үүнд хүрэхэд самбар өөрчлөгдөж, гадаад төрхийг нь бүрэн өөрчлөх боломжтой. Хуудас дээр хэдэн ч ийм сегмент байж болно.

On-Scroll Animated Header Наалттай навигацийн мөрийг хэрэгжүүлэх сайн залгаас. Энэ нь иймэрхүү ажилладаг: хуудасны хамгийн эхэнд лого, цэсийг агуулсан өндөр гарчгийг харж байна. Гүйлгэх үед лого, навигаци зэрэг бүх элемент бүхий толгойн хэсэг нь шинж чанарыг ашиглан жигд буурч, дэлгэцийн дээд хэсэгт наалдсан нарийн тууз болж хувирдаг.

Даалгавар

Хуудсыг гүйлгэх үед блок элементийн байрлалыг тохируулна уу.

Шийдэл

Вэб хуудасны тодорхой газар элементийг "хөлдөх" нь хэв маягийн шинж чанарын байрлалыг ашиглан тогтмол утгыг ашиглан хийгддэг. Энэ тохиолдолд гүйлгэх аргыг ашиглан хуудсыг гүйлгэх үед ч элементийн байрлал өөрчлөгдөхгүй. Координатыг зүүн, баруун, дээд ба доод шинж чанаруудаар дамжуулан зааж өгдөг бөгөөд энэ нь хөтчийн цонхны зүүн, баруун, дээд, доод ирмэгээс байрлалыг тус тус тодорхойлдог (жишээ 1).

Жишээ 1: Байрлал ашиглах

HTML5 CSS 2.1 IE Cr Op Sa Fx

Тогтмол цэс .цэс ( байрлал: тогтмол; /* Тогтмол байрлал */ баруун: 10px; /* Хөтөчийн цонхны баруун ирмэгээс авах зай */ дээд: 20%; /* Дээд зай */ дүүргэгч: 10px; /* Зайны зай текстийн эргэн тойронд * / дэвсгэр: #ffe; /* дэвсгэр өнгө */ хүрээ: 1px хатуу #333; /* хилийн сонголтууд */ ) .текст (өндөр: 1000px; ) Цэс

Энэ жишээний үр дүнг Зураг дээр үзүүлэв. 1. Хуудсыг доош гүйлгэх үед элементийн байрлал өөрчлөгдөхгүй гэдгийг анхаарна уу.

Саяхан нэгэн чиг хандлага моод болж байна: хуудсыг гүйлгэх үед тогтмол цэс. Ихэвчлэн энэ нь Landing Page сайт дээрх хэвтээ цэс юм.

Энэ нь хэрхэн ажилладаг вэ гэвэл хуудсыг ачаалах үед цэс нь хуудасны тодорхой газар (жишээлбэл, "толгой" доор) байрладаг бөгөөд хуудсыг гүйлгэх үед хөтчийн цонхны дээд хэсэгт бэхлэгдсэн байдаг. бусад контент шиг гүйлгэдэггүй.

Хэрэв зочин хуудсыг дээш гүйлгэж, хуудасны эхэнд хүрвэл цэс байрандаа буцаж ирнэ. Тиймээс, зочин хуудасны аль ч хэсэгт байхдаа үүнийг ашиглаж, сайтын бусад хуудсууд руу орох боломжтой. Энэ нь маш тохиромжтой бөгөөд ашиглалтын зарчимд нийцдэг.

Одоо би танд хамгийн бага цаг зарцуулж, мэргэжлийн хүмүүсийн тусламж авахгүйгээр ийм цэсийг хэрхэн хэрэгжүүлэхийг танд хэлэх болно.

Эхлээд бид сайтын jQuery номын санг холбох хэрэгтэй

< script src= "//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" >

Та дотооддоо эсвэл Google-ээр холбогдож болно.

Орон нутагт холбогдохын тулд та jQuery файлыг албан ёсны вэбсайтаас http://jquery.com/ татаж авах хэрэгтэй.

CSS

JavaScript

Скрипт дээр бид 2 хувьсагчийг үүсгэдэг бөгөөд бид толгойн өндөр, блокийн доголын утгыг дээд талд байгаа цэсээр хадгалдаг. Догол байхгүй байж болно (энэ тохиолдолд). Дараа нь бид цонхны объектын onScroll үйл явдлын зохицуулагчийг бичнэ. Үүнд, scrollTop() аргыг ашиглан бид хуудасны дээд хэсгээс гүйлгэх гүйлгэгчийн одоогийн байрлал хүртэлх зайг тооцоолно. Тооцоолол дээр үндэслэн бид блокыг цэстэй хамт байрлуулна.

Энэ бол энгийн шийдлүүдийн ачаар та сайтын үндсэн хэсгийг гүйлгэх үед гүйлгэх боломжгүй сайхан тогтмол цэсийг олж авах боломжтой.

Вэбсайтад зориулсан тогтмол цэсийг хэрэгжүүлэх боломжийг олгодог скриптийг авч үзье. Энэхүү скриптийг хөгжүүлэх үзэл баримтлалд програмчлалын хэл орно JQuery, үүнтэй холбоотойгоор та зөвхөн цэсийг засах боломжгүй, ихэвчлэн өмчтэй холбоотой байдаг css зассан, гэхдээ хуудсыг дээш гүйлгэх үед файлд бичиж болох толгойн догол мөрийг хадгалах нь баталгаатай болно. js.Түүнчлэн, энэ технологи нь доод болон дээд цэсэнд тохиромжтой.

Хөтөч хоорондын нийцтэй байдлын скриптийг шалгасны дараа энэ нь бүх шинэ хувилбарууд дээр төгс ажилладаг болох нь тогтоогдсон боловч хөтөч дээр асуудал гарсан. Internet Explorerхувилбар 9-ээс өмнөх, гэхдээ энд гайхах зүйл алга, энэ нь хуучин хөтчүүдийн ердийн зүйл юм.

Та шинэ зүйлсийг удаан хугацаанд хэрэглэж байгаа гэдэгт найдаж байна.

Эхний хэсэг. Холбох хэв маяг ба jsфайлууд.

Эхлээд стандартын дагуу шаардлагатай бүх хэв маягийг холбож, файлуудыг нэмье jsЭнэ скриптэд шаардлагатай . Эхлээд бид загварын файлыг оруулна demo.css.

Дараа нь бид номын санг холбодог jquery-latest.min.jsцэсний догол болон холбоосын ажиллагаа, мөн өндрөөр заасан анхны зөв байрлалыг хариуцах menu.js файл.

Хоёрдугаар хэсэг. Файл index.php.

Энд бүх зүйл энгийн, бид цэсийг стандартын дагуу харуулдаг уллимөн бүрхүүлийг блок элемент болгоно див, энэ нь id-тэй байх болно цэс, стиль болон файлтай бүрэн харьцдаг menu.js.

Ru/news/">Мэдээ

төслийн талаар

Гурав дахь хэсэг. Файл demo.css.

Тогтмол цэсийн хэв маяг руу шилжиж, заавал байх ёстой үндсэн шинж чанаруудыг бичье! Эхлээд бид танигчийг бүртгүүлнэ цэс: дэвсгэр, байрлал, өргөн. Хоёрдугаарт, бид бүгдийг нь төв хэсэгт байрлуулж, өндрийг нь тогтооно.

#цэс (арын дэвсгэр:#ab4040; өргөн:100%; байрлал:тогтмол; ) #цэс ul(маржин:0 авто; өргөн:750px; өндөр:40px; )

Дараа нь бид цэсийн элемент бүртэй, эс тэгвээс холбоосуудтай ажиллаж, дараах шинж чанаруудыг тэдэнд хуваарилдаг.

Хувийн хулганын шинж чанар, хүрээ гэх мэт нь зөвхөн гоо сайхны зориулалттай бөгөөд нэмэлт гэж үздэг.

# цэс ул li ( хөвөх: зүүн; жагсаалтын хэв маяг: байхгүй; өргөн: 140 пиксел; текстийг зэрэгцүүлэх: төвд; хүрээ-баруун: 1 пикселийн оруулга # d0d0d0; өндөр: 40 пиксел; ) .menuleft ( зүүн хүрээ: 1 пикселийн оруулга # d0d0d0 ; ) # цэс ул ли а ( мөрийн өндөр: 40 пиксел; бичвэр чимэглэл: аль нь ч биш; өнгө: # ffffff; ) # цэс ul li: хулганаар (box-shadow: 0 1px 0 #ab4040; дэвсгэр: #f43e3e; )

Дөрөвдүгээр хэсэг. Файл menu.js.

Одоо бидэнд хамгийн сонирхолтой хэсэг байна. Бид цэсээ шаардлагатай түвшинд нь засах болно. Хувьсагчаа бичье цэсийн_өндөр, Үүнд бид сайтынхаа толгойн өндрийг хадгалах болно. Энэ нь хуудсыг гүйлгэх үед сайтын толгой хэсгээс шаардлагатай зайд цэсийг зөв засах боломжийг танд олгоно. Хувьсагчаар бүрэлдэхүүн, Бид id шинж чанаруудыг хадгалдаг цэс болонэд хөрөнгийг тохируулах дээд, цэс дээд талд байх болно гэдгийг харуулж байна, болон хувьсагчтай харьцуулах цэсийн_дээд, толгой хэсгээс цэс хүртэлх шаардлагатай зайг тооцоол.