Давхар баганын зохион байгуулалт (хажуугийн хэсэг болон бохьны агуулгыг засах). WordPress-ийн дээд цэс болон хөвөгч хажуугийн самбарыг гүйлгэх үед зассан

Зохион байгуулалтад хэрхэн туслах вэ:

  • Бохь хоёр баганын зохион байгуулалт
  • Хажуугийн самбар тогтмол өргөн 300px
  • агуулга нь бүрэн хэмжээгээр өргөждөг.
  • хөлийг доод тал руу нь дарсан (үүнд uroci хэрхэн айхыг харуулаагүй).

Ийм зохион байгуулалтыг гаргахдаа Css-тэй холбоотой асуудлуудыг буруутгаж байна:

1 арга зам

Чи яаж блокуудыг хөвөгч (хөвөгч) дээрэмддэг вэ, чи тогтмол өргөнийг тогтоосон(1 хажуугийн самбарыг 300px, контентыг 100% болгож тохируулах боломжгүй). Ийм байдлаар контент доош гүйлгэх эсвэл зүүн тийш 300px хэвтээ гүйлгэх дүрс гарч ирнэ. Энэ арга нь бидэнд тохиромжгүй гэдгийг ойлгох нь тэнэг хэрэг юм.


2 арга зам

Хэт олон верстальникууд ингэж дуудна, ямар өмхий үнэрийн талаар бодох вэ? Аргын мөн чанар нь та 300 өргөнтэй хөвөгчийг тохируулж болно, гэхдээ агуулгыг хөвөгч болохгүй, зүүн-зүүн: 300px-ийг тохируулаарай. Гарнигийн аргамөн маш сайн гарах нь сайн хэрэг. Үнэнийг хэлэхэд, би үүнийг хамгийн сайн арга гэж бодож байсан ч энэ аргаар би өөрийн усан доорх чулуутай болсон. Шалтгаан нь яг ижил аргаар агуулгад үргэлж хөвөгч li эсвэл хөвөгч блок бүхий цэсүүдийг байрлуулах боломжтой байдаг бөгөөд дараа нь бид тэдгээрийг тодорхой болгохын тулд тэдгээрийг цэвэрлэхийг хүсч байна: хоёулаа, тэгвэл блокийн доод хил нь байх ёстой. доод талын баарны хил дээр доошоо. ба хэлтэрхий нь хөөс цэвэрлэж байгаа нь гайхах зүйл биш юм хөвөгч блокыг тогтсон өндөрт тохируулна, гэхдээ баруун талд биш, тогтмол өндрийг тавь).


3 арга зам

Та нүдээ ирмэж болно хажуугийн байрлал үнэмлэхүй, ale tilki yakshcho vie Агуулга нь хажуугийн өндөрт илүү том байх болно гэдэгт би итгэлтэй байнаөөрөөр хэлбэл, хажуугийн самбар бүхэлдээ хөл хэсэгт байна (байршил үндсэн урсгалаас бүрэн гарсан байсан ч).

ale yak me tse tezh ч сайн арга биш!


4 арга

"Гайхамшигтай арга, гэхдээ шинэ хувилбар дээр жаахан сэтгэгдэл үлдээнэ үү. Гэхдээ би үүнийг хамгийн сайн арга гэж бодож байна."

  • Нэмж дурдахад энэ арга: эхлээд DOMe контент дээр та sidebara-аас эрт орох болно, энэ нь нудрах системд тохиромжтой.
  • хөл хэсэгт юу ч бүү тавь
  • блокуудыг цэвэрлэж чадах эсэх, юу ч доод хил рүү авирахгүй байх (Тиймээс бид асуудлыг өөр аргаар шийдсэн).

Взагали дарс pratsyuє дуртай:Эхлээд кодыг гайхшруулж, дараа нь хажуугийн самбар дээр байгаа кодыг гайхшруулж байна. хөвөгчийг хоёр блок болгон тохируулах (байгалийн дагуу хажуугийн самбар доошоо хөдөлдөг). Үүний дараа бид хажуугийн самбарын хүчийг зүүн-зүүн талд тохируулна: -100%. эелдэгхэн vіn газар дээр нь эргэж, robimo агуулгын margin-lerft оруулна уу: 300px.


html

css

.sidebar(
өргөн: 300px;
дэлгэц:блок;
хөвөх: зүүн;
маржин: 0 0 0 -100%;
}
.агуулга(
хамгийн бага өргөн: 723px;
дэлгэц:блок;
хөвөх: зүүн;
захын зай: 0 0 0 220px;
}

Сайн байна уу, өнөөдөр бид тантай сайтад хэрхэн сайн навигацийн самбар үүсгэх талаар ярилцах болно. Энэ нь арьс Интернэт нөөцөд практик vikoristovuetsya, тиймээс арьс ширний жижиглэнгийн жижиглэнгийн элемент үүсгэж болно.

Өгүүллийн өмнөх тайлбар:

  1. "Sidebar/sidebar" - сайтын навигацийн талбар.
  2. "Байршил" - CSS-ийн хүч.
  3. "Дээд", "зүүн", "баруун", "доод" - CSS-ийн хөдөлгөөний хүч.
  4. WordPress бол вэб сайтад зориулсан агуулгын удирдлагын систем/CMS юм.
  5. Webix - UI номын сан. Хүснэгтийн элементүүдийг үүсгэх боломжийг танд олгоно.
  6. Харах - JavaScript функц.

Энэ нийтлэлийг харуулах болно янз бүрийн арга замууднавигацийн самбарыг өөрийн гараар болон тусгай сайт бүтээгчдийн тусламжтайгаар бий болгох. Үүний зэрэгцээ WordPress-ийг онцолж байна.

Би хажуугийн самбарыг гараар хэрхэн хулгайлах вэ? CSS & HTML

Бид нэгэн зэрэг хөгжлийн уламжлалт арга замыг харуулж, код нь өөрөө бичигдсэн байдаг текст засварлагч. Үүний тулд та HTML болон CSS баримт бичгүүдийг код засварлагч дээр оруулах хэрэгтэй.

Баруун талаас хажуугийн самбар үүсгэх. HTML ба CSS

Хамгийн түгээмэл навигацийн мөр нь сайтын толгой хэсэгт эсвэл сайтын баруун талд байрладаг. Өөр vipad дээр 2 баганатай бүдүүвчээр хонх дуугарна уу.

Урьдчилан сайн - бэлэн зохион байгуулалт, ингэснээр та навигацийн блокийн өргөнийг мэдэх болно. За, хэрэв зохион байгуулалт өдөр бүр байвал та rozrobtsі эхлүүлэх боломжгүй.

Хүндэтгэсэн! Сайтын хажуугийн самбар болон бусад элементүүдийг бий болгохдоо бэлэн зохион байгуулалтыг бэлтгэ. Шинэ зүйлд анхаарлаа төвлөрүүлснээр та хөгжлийн үйл явцыг хялбарчлах болно.

Нэмэлт жагсаалт болон гайхалтай блокуудад зориулж навигацийн самбар үүсгэж болно. Жагсаалтад ялах бүртээ "текст чимэглэл"-ийн хүчийг асаана уу.

Өгзөг дээр div блок бүхий загвар байдаг.

Кобын хувьд бид бүдүүн div блок үүсгэдэг бөгөөд үүнд багануудыг байрлуулах болно. Бид шинэ ангид зориулж бүтээдэг, бидний өгзөг нь ангийн зохион байгуулалттай боловч энэ нь хөгжлийн үйл явцад тийм ч их нөлөөлдөггүй.

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

Гарны ар тал нь байрлалыг тодорхойлоход чухал ач холбогдолтой. Зэрлэг савны хувьд бид тодорхой байрлалыг тогтоосон - хүч (байршил: харьцангуй). Эрчим хүчийг баганад хуваарилдаг (байрлал: үнэмлэхүй).

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

Манай програмд ​​код дараах байдалтай байна.


HTML

туршилтын хуудас

2-р багана

Хуулбарлах


css

зохион байгуулалт (

албан тушаал: харьцангуй;

дэвсгэр: rgba(119, 115, 115, 0.58);

}

Sidebar , .content (байрлал: үнэмлэхүй ; )

хажуу талбар(

дэвсгэр: #C6DD7D;

Агуулга(

дэвсгэр: #F4ECCE;

Хуулбарлах

Хүндэтгэсэн! Ерөнхийдөө навигацийн цэгийн арьсны хүрээний өргөнийг зааж өгнө үү. Баруун талд, тэдгээр нь туйлын байрлалтай байх тул тэдгээрийн өргөн нь дотоод агуулгын өргөнтэй тэнцүү байна.

Тиймээс, ар талд нь өөр багана байрлуулсан гэдгийг зааж өгөх нь зүйтэй бөгөөд дараа нь бид эхлээд хийх болно. Ялсан үед өгөгдсөн аргаЭнэ нь хамаагүй, тиймээс багануудыг номлолд амархан санаж болно.

Үүнийг хийхийн тулд та хөвөх хүчийг ашиглаж болно. Энэ арга нь илүү хялбар бөгөөд хэлтэрхий нь хүрээлэн буй элементүүд дээр суурилдаг. Zavdyaki youmu манай sidebat roztashovuvatisya з байх болно баруун тал.

Баруун талд эвхэгддэг навигацийн самбар. HTML ба CSS


Ийм самбарыг бий болгохын тулд эхний өгзөгт байгаа ижил тэмдгийг ялах боломжтой. CSS код нь мөн тусгай өөрчлөлт шаарддаггүй.

Та CSS коддоо бага зэрэг өөрчлөлт оруулах хэрэгтэй. Цэс баруун гартай байх шаардлагатай. Өргөн ба тэр байрлалын хүч өөрчлөгдөөгүй!


WordPress дээр хэрхэн хажуугийн самбар үүсгэх вэ?

Одоо урд талаас нь бүр илүү харагдах замыг харцгаая. Үүний ялгаа нь та CSS болон HTML код ашиглахгүйгээр практик аргаар ижил төстэй навигац үүсгэж чаддагт оршино.

Та бүх кодыг гараар бичих шаардлагагүй, бүх ажлыг бүтээгч өөрөө хийх болно.

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

Хажуугийн самбарыг WordPress дээр бүртгүүлэхийн тулд та хэд хэдэн функцийг бичих хэрэгтэй PHP файлууд. Үндсэндээ танд виджет болон div хаягуудад хамаарах мэдээллийн массив хэрэгтэй.


Манай өгзөг нь баруун талын хажуугийн самбар, мөн хөлийн хажуугийн самбартай.

Webix-ийн талаар хэдэн үг хэлье

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

Кобын хувьд та бүхэл бүтэн хүрээг шүүрч авах хэрэгтэй. Үүний дараа та HTML баримт бичигт зарим загвар, скрипт нэмэх хэрэгтэй.

Дараа нь та хажуугийн самбар үүсгэхийг өөрчилж болно. Энэхүү байршуулалтын хувьд хүрээ нь тусгай функцтэй - view. Rozmіschennya elementіv нь сарлаг болон rozmіschuvatime.

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

Висновок

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

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

Шошго:

Сайн байна уу, блог сайтын шинэ уншигчид. Энэ нь өөртөө илүү тэмдэглэл байх тул хэрэв би бүх зүйлийг эргүүлэхийг хүсч байвал та өөрөө ичимхий гэдгээ бүү мартаарай. Уншигчдын нэг нь WordPress-д зориулсан залгаасын нэрээр бичихийг хүссэнээс бүх зүйл эхэлсэн Q2W3 Тогтмол виджет(Наалттай виджет) нь хажуугийн самбарт хөвөх эсвэл өөрөөр хэлбэл засах боломжтой.

Тобто. Хуудсыг доош гүйлгээд хажуугийн самбарын гол хэсэг өгсөж байгаа эсэхийг шалгаарай, дараа нь виджет нь хамгийн доод хэсэгт нугалж байгаа эсэхийг шалгаад үзэх хэсэгт хол байгаа мэт төөрч, наалдаагүй болно. текстийг доош. Би тэр даруй бодох болно түгээх контекст сурталчилгаа Энэ нь ижил төстэй зэрэглэлээр хашаалагдсан бөгөөд үүний төлөө шийтгэгдэж болно (сэтгэгдэл дээр дурдсанчлан - YAN зөвшөөрөгдсөн бөгөөд Adsense нь маш робити юм).

Залгаас нь гайхалтай, гэхдээ би үүнийг оруулсан сэдвүүдэд оруулсан, тиймээс л юм Данигийн уулзалтИнтернэтээс миний мэддэг хэд хэдэн javascript кодын тусламжийн төлөө.

Үүний үр дүнд миний дээд цэсийг зассанХяналтын хэсгийн хамгийн дээд хэсэгт (үнэндээ зөвхөн CSS кодыг ашиглахад хангалттай байсан, гэхдээ хялбар арга байхгүй) ба хажуугийн доод хэсэг нь бэхлэгдсэн байнаДэлгэцийн баруун дээд хэсэгт, хэрэв та нэг цагийн турш хүрээд хажуу тийш гүйлгэж байвал. Юу болохыг би мэдэхгүй, гэхдээ шийдэл нь үнэхээр энгийн.

Шинэ засах цэс болон бат бөх хөвөгч хажуугийн самбар

Дээд цэсийг засах хэрэгтэй, хооллох уу? За загал, "Багасгах" сэдвээр бяцхан туршилт хийе. Цэвэр таамаглалаар бид користувачийн сайт дээр өнгөрөөсөн тэр цагийн дотор хэдэн тал руу харсаныг санаж чадна гэж үзэж болно.

Нөгөө талаас, ижил төстэй суурин хавтангийн хэт тэгш байдал нь уншигчдын сөрөг хариу үйлдэлд хүргэж болзошгүй бөгөөд энэ нь энэ үйлдлийг идэмхий болгодог. Дараагийн засварын дараа үр дүнд нь гайхах шаардлагатай болно - хэрвээ цэсийг засахаа больсон бол (дахин үзсэн хэсгийн дээд ирмэг дээр хадаж авъя) туршилтыг үргэлжлүүлэхгүй. Бүх зүйл хэвийн байгаа тул би өөрчлөлт бүрийн дэлгэцийн агшинг авна.

Бусад шалтгааны улмаас WordPress дахь хөвөгч худгийн хажуугийн самбар нь хамгийн их хүндэтгэлтэй хандаарай. Зарчмын хувьд энд та гарчгийн жагсаалт, алдартай эсвэл үлдсэн нийтлэлүүдийн жагсаалтыг оруулах боломжтой бөгөөд энэ нь зан авирыг сайжруулахад туслах болно. Ихэнхдээ зар сурталчилгааг ийм хөвөгч блок дээр байрлуулдаг (би аль хэдийн таамаглаж байсанчлан контекст боломжгүй), энэ нь зөвхөн таамаглалаар вэбмастерын орлогыг нэмэгдүүлэх боломжтой. tyzhden-ийн үр дүнг харцгаая.

WordPress дээрх дээд цэсийг хэрхэн засах вэ

За, би өөрийнхөө шийдлийг хэмжүүрээр мэддэг. Энэ аргыг ашиглахын тулд jQuery номын санг тухайн хэлэнд оруулж болно. Хэрхэн tse robiti, мэдээлснээр агуулгыг сурталчлах нийтлэл тайлбарласан.

Таны санаж байгаагаар талуудын сонирхлын хурдыг оновчтой болгох тухай нийтлэлд бүх CSS болон JS-ийг нэг том болгон (хоёр нь - нэг нь хэв маяг, нөгөө нь скрипт) болгон нэгтгэхийг хичээх хэрэгтэй. Тэнхлэг, vlasne, ийм файлд би кодын эгнээний доор troch-ийн удирдамжийг нэмсэн. Хэрэв та тэдгээрийг зуучлагчгүйгээр нэмж болно html код, скрипт шошгуудаар хурцалсан. Жишээлбэл, та header.php загварыг толгойн тагны дунд хэсэгт нэмж болно.

Та бидэнд туслахын тулд цэвэр CSS-ийн тусламжтайгаар дээд цэсийг засах боломжтой. Эндээс та CSS-ийн тусламжтайгаар байр сууриа ялж чадна, гэхдээ энэ нь бараг төсөөлөх боломжийг харуулж байна. тогтмол цэсдараалан биш, харин гүйлгэх нь cob дараа жил гэхэд (дуулах vіdstanі vіd дээд дээр).

Миний давуу тал руу дээд цэс засах кодтэнхлэг нь дараах байдлаар харагдаж байна.

$(функц()( $(цонх).scroll(функц() ( var top = $(баримт бичиг).scrollTop()); if (дээд).< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });

Та энэ кодын хэсэгчилсэн хэсгийг юунд оруулж болохыг тааварлаарай:

  1. Загварын сэдэвтэй хавтсанд (/wp-content/themes/theme) амьдардаг extensions.js-тай файл. Шинэ header.php файлын хувьд таны сайтын вэб хуудсуудтай зэрэгцэн хэд хэдэн урамшуулал байдаг бөгөөд энэ нь дараах байдалтай байж болно.
  2. Та header.php файлыг өөрөө нэмж тохируулж болно Данийн кодТолгойн шошгуудаар муруйлт ба муруйлт болон скрипт тагуудад хүрээлэх хооронд, жишээ нь:
  3. Кодоо өөр газар бичиж болох уу скрипт хаягууд. Головня, Шоб шаардлагатай талуудблог. Жишээ нь, footer.php дээр биеийн тагийн өмнө үүнийг хааж болно.

Одоо би кодыг гацаахгүй араатан шиг хөдөлж байна. Гарч ир, дээд талд нь 10 пикселийн дараа, та байрлалыг засах замаар өөрчлөгдсөнийг харж болно (санал болгож буй хүчний хуваах нийтлэл). Шаардлагатай бол 3-р эгнээнд, дээд талын утгын хувьд та тэг биш, тэр ч байтугай цэсийн дээд хэсэгт байрлах талбайн дээд ирмэг дээр бэхлэгдсэн байж болно, би пикселийн утгыг (миний хэсэгт) хардаг. үзэл бодол, tse zayve).

Анхны кодыг харахад би өргөнийг нэмэх боломжтой байсан: "100%", эс тэгвээс цэсийн өргөнийг өөрчилсөн бөгөөд энэ нь зургийг бүхэлд нь харуулах болно.

Гайхалтай нь, үнэн зөв байхын тулд би Html кодыг зааж өгөх болно, үүний тусламжтайгаар миний дээд цэс бий болно. wordpress загварблог (миний header.php файлд амьдардаг):

Та бүх зүйл дээр илүү сайн, тусламжийн цэсийн зүйлсийг харуулах загвартай, жишээлбэл, ийм дизайны (функц) тэнхлэг, гэхдээ энэ нь ямар ч утгагүй юм.

Мэдээжийн хэрэг wp_list_pages функц нь сайн (энэ нь танд ангиллыг тохируулах, буруутгах боломжийг олгодог), гэхдээ илүү дээр нь би бүх зүйлийг тусгай Html-ээр дамжуулан гараар хийдэг. IMHO.

Энд бүх баруун талд овоолсон хүмүүсийг барих нь чухал юм чингэлэг divs болон тэдгээрийг олсон id = "navi" гэж нэрлэж болно. Шинэ mi болон chіplitimemosya руу тэнхлэг. Хулганы байрлуулсан JS код дээр багцлана #нави? Та тэнд ID-аа #navi-г буулгах хэрэгтэй (эсвэл таны санаж байгаагаар анги нь хаалгаар биш, цэгээр бичигддэг, жишээ нь: .menu).

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

Цэ, хүлээгээрэй, сайн биш байна. Том санамсаргүй байдлаар CSS кодыг бөглөж, id сонгогч #navi-д 1000 гэсэн 3 утгыг нэмэв:

#navi(арын дэвсгэр:#03658e url(https://website/wp-content/themes/Organic/images/spriteme2.png) давталт-x; арын байрлал:0px -10px; өндөр:31px;z-индекс:1000 )

Баруун талд, хэрэв та нэмэлт байрлалд гурван төрлийн байршлын аль нэгийг зааж өгвөл энэ элемент нь Html кодын хамгийн чухал элементүүдтэй харилцахаа зогсооно. Гэсэн хэдий ч тэд ижил төрлийн бусад хүмүүстэй "дээш эсвэл дээгүүр" лагерийн төлөө өрсөлддөг. z-index:1000 нь бусад бүх блокуудын цэсийг өргөжүүлэх боломжийг танд олгоно. Дэлгэрэнгүйг нийтлэлийнхээ удирдамжаас уншина уу.

WordPress хэрхэн залгаасгүй хөвөгч хажуугийн самбартай байдаг

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

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

Гэсэн хэдий ч би маш хурдан ажиллаж, өөртөө онцгой анхаарал хандуулдаггүй бөгөөд оновчтой шийдлийг хайж байна, учир нь дарсыг тогтмол туршиж үзсэн арвин туршлагаасаа илүү их итгэл найдвар төрүүлдэг, юуг харуулах вэ гэсэн итгэл үнэмшил багатай. ” За яахав. Загалом, ямар ч мэдрэмжгүй болтол тэнэгтэх, учир нь үндэс авах чадвар нь тийм ч их биш юм.

Тиймээс би зүгээр л авч байна доод блокийг нугалахад зориулагдсанөөрийн үндсэн хажуугийн дээд хэсгийг (sidebar.php загварт), дараа нь дээд хэсгээс доод блок руу "Vicorist for earnings" руу шилжүүлж, жишээ нь үндсэн блок дээр дууссан хэсгийг нааж болно. Энэ нь иймэрхүү зүйл болсон:

За, одоо би хажуугийн самбарын дээд блокоос доод хэсэг рүү шилжсэн "Vicorist for earnings" блоктой боллоо. Вийшло бол усан оргилуур биш, харин "цаг" зийд юм. Зөвхөн JS файлыг кодоор бөглөхөд л үлдсэн бөгөөд доод блок нь хөвөх магадлал өндөр байна. JS код дараах байдалтай байна.

$(баримт бичиг).бэлэн(функц()( var br = $.хөтөч; $(цонх).scroll(функц() ( var top = $(баримт).scrollTop(); if (дээд)< 2561) { $(".sidebar123").css({top: "0", position: "relative", marginLeft: "25px"}); } else if ((!br.msie) || ((br.msie) && (br.version >7))) ( $(".sidebar123").css((дээд: "52px", байрлал: "тогтмол", зүүн зах: "760px")); ) өөр хэрэв ((br.msie) && (br.version)<= 7)) { $(".sidebar123").css({top: "52px", position: "fixed", marginLeft: "25px"}); } }); });

Та өөрийн анги эсвэл хажуугийн доод блок байрладаг гаднах савны ID-г оруулах шаардлагатай.

Би хэнийх нь код биш, тиймээс би маш сайн ойлгодог (JS бол том биш), гэхдээ бүх зүйл ажилладаг. Байнга ав. Хэрэв та тогтмол байрлалыг зааж өгвөл зүүн дээд цэгт дуугарах болно. Дараа нь, зүүн талын захын тусламжийн хувьд: "760px" Би энэ блокыг хажуугийн самбарын ирмэг дээр байрлуулна (тоог "туршилт, өршөөлийн" аргаар хассан).

Дээд талын утга: "52px" нь дээд талын хил дээрх хажуугийн хөвөгч блок доторх оруулгыг тохируулна. Гэсэн хэдий ч надад байгаа виник асуудалЭнэ тохиолдолд үндсэн хажуугийн самбарын өндөр нь агуулгын талбайн өндрөөс бага байсан. Ийм зүйл vilazila байсан, жишээлбэл, нэг цагийн турш би гарчгийн архивыг үзэх болно:

CSS-ийн үүднээс харахад яагаад ийм юм шиг санагдаж байгааг би ойлгож байна, гэхдээ засварын талаар бодох тэнхлэг нь хайлж байв. Би зүгээр л ижил төстэй талдаа хөвж буй хажуугийн блокийн дэлгэцийг үзэх боломж олдсон (тэнд дарс хэрэггүй).

";} ?>

"Цуурай"-д заасан кодын нэгэн адил сарвууг нэг нэгээр нь хурцалж, дараа нь энэ нь шаардлагатай болно гэдгийг хүндэтгэхийн тулд дэлгэц, дараа нь. Тэдний арьсны урд нумгүй зураас (\) тавих нь зүйн хэрэг.

Загалом виышло, сарлагийн виышло. Хэрхэн тусгайлан тэдгээр нь таных хүртэл шураг, Та өөрийгөө virishuvate тохиолдох - Хэрэв энэ нь нэг цаг бол, дараа нь энэ нь "толгойгоо хугалах" нь дажгүй юм. Баярлалаа.

Чамд амжилт хүсье! Блог сайтын тал дээр хурдан zustrіches тулд

Та бути цикаво болно

WebPoint PRO - өргөн ажиллагаатай, чадварлаг техникийн хайлтын системийн оновчлол бүхий WordPress-д зориулсан дасан зохицох загвар
Share42 - сайтад нийгмийн сүлжээний товчлуурууд болон хавчуурга нэмэх скрипт (хөвөгч самбарын сонголт)

Cicavo, ямар блок, гүйлгэх үед нэг хоосон зайд юу үлдэх вэ гэвэл: "хөдөлгөөн", "хөвөгч", "нурах", "эвхэгддэг", "ковзки". Тэгээд үнэндээ "наалдамхай", "сахилгагүй", "засвар"гэж sevnіy dіlyantsі дэлгэцийн дэлгэц дээр roztasovaniya, nezalezhno vіd алхам гүйлгэх вэб хуудас.

Амралтын өдрүүдийн сонголт, хэрэв юу ч усанд сэлэхгүй бол

Хуучин өгөгдөл: блок аль хэдийн байрлуулсан байна. Би ийм сайхан хөлтэй юм шиг санагдаж байна, чамд арай өөр байна.

Хэрхэн блок үүсгэх (div, toshcho хажуу тийш), толгой, зар, засах цэс. Зөвхөн CSS

Хөлийн хэсэг эсвэл өөр элемент дээр хөвж буй хөвөгч блок. jQuery-гүй цэвэр JavaScript

Тиймээс хөвөгч блок нь мэдэхгүй, сайтын доод хэсэгт очдоггүй, харин заасан элемент дээр гогцоо хийдэг.

Элемент өөр элементээр гүйлгээд нэг цаг хүрэхгүй хугацаанд наалддаг

Өгүүллийн талбар дуусах үед энэ элемент нь дуусвал харагдах ёстой. Тиймээс нийтлэлийн доод хил болон хажуу тал нь нэг мөрөнд байж болно.

Зробитийн нэгэн адил хоёр (neobov'yazykovo) блок хоёр хажуугийн самбарт гацсан.

Хоёр ба түүнээс дээш блокуудыг нэг нэгээр нь засдаг

Хоолойг доод тал руу нь буулгаж, эхний блок нь наалддаг, хэрэв эцэг нь дуусвал гарч ирдэг; өөр нэг нь наалддаг, хэрэв аав нь дуусвал - энэ нь наалддаг; гурав дахь нь наалддаг гэх мэт.

Эдгээр нь зөвхөн унтаж буй аавынх юм.

Хоосон зайгүй хөвөгч довга бична багана

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

HTML+CSS+JS дээрх тогтмол хөвөгч хажуугийн самбарын хамгийн энгийн жишээ.

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

Ийм сайтаас авах өгзөг, дарс нь бас анхдагч (мөн ёс суртахууны хувьд хуучин), зөвхөн зохион байгуулалтад тохиромжтой. Илүү олон нийтийн кодыг энэ нийтлэлээс харж, төсөлдөө зориулж өөрийн кодыг бичиж болно.

Энгийн талын HTML зохион байгуулалт

ТОЛГОЙ
АГУУЛГА

Агуулгын блокуудад зориулсан CSS загварууд

.толгой (өргөн: 100%; дэвсгэр: нил ягаан; өндөр: 80px; ) .контент (өргөн: 80%; дэвсгэр: цэнхэр; өндөр: 800px; хөвөх: зүүн; ) .sidebar ( өргөн: 20%; дэвсгэр: ногоон; өндөр: 100px; хөвөх: баруун; ) .sidebar.fixed (байрлал: тогтмол; баруун: 50%; баруун захын: -50%; ) .footer ( өргөн: 100%; хоёулаа;

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

jQuery-г оруулахаа бүү мартаарай

$(function() ( var $window = $(цонх); var $sidebar = $(".sidebar"); var $sidebarTop = $sidebar.position().top; var $sidebarHeight = $sidebar.height() var $footer = $(".footer"); var $footerTop = $footer.position().top; $window.scroll(функц(үйл явдал)) ( $sidebar.addClass("зассан"); var $scrollTop = $ window.scrollTop(); var $topPosition = Math.max(0, $sidebarTop - $scrollTop); $scrollTop - $sidebarHeight);) $sidebar.css("дээд", $topPosition); )); )))

Суурилуулсан гаднах барилгууд