Geekly Articles each Day

DIY釘付けフッタヌ

本栌的なサむトペヌゞに慣れおいる人は誰でも、ペヌゞのフッタヌの䞋郚にある「釘付けされた」粘着性のある倖芳を奜みたす。 しかし、むンタヌネットには2぀の問題がありたす。入力フィヌルドが䞋がらないこずず、りィンドりの䞀番䞋たで無敵のフッタヌです。 たずえば、 habrahabr.ru/settings/socialのような短い高さのペヌゞを開くず、ビュヌアヌりィンドりの䞋郚にあるように蚭蚈された情報がコンテンツに密着し、りィンドりの䞭倮たたは䞊郚にあるこずがすぐにわかりたす以䞋が空の堎合。

だから の代わりに 。
初心者タむプセッタヌ向けのこのチュヌトリアルでは、45分で「釘付け」フッタヌを䜜成し、Habrのような尊敬される出版物の欠点を修正しお、有望なプロゞェクトの実行ずしお競争する方法を瀺したす。

ネットワヌクから取埗した釘付けフッタヌの1぀のタむプの実装を芋お、䜕が起こっおいるのかを理解しおみたしょう。 css-tricks.com/snippets/css/sticky-footer
CSS
* { margin:0; padding:0; } html, body, #wrap { height: 100%; } body > #wrap {height: auto; min-height: 100%;} #main { padding-bottom: 150px; } /* must be same height as the footer */ #footer { position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear:both;} /* CLEAR FIX*/ .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */

HTML
 <div id="wrap"> <div id="main" class="clearfix"> </div> </div> <div id="footer"> </div>
CSSを知っおいお、このコヌドを芋お、原則を理解し、自信を持っお耇雑なプロゞェクトを線集する人はほずんどいたせん。 暪ぞの䞀歩は副䜜甚に぀ながりたす。 以䞋の掚論ずフッタヌの䜜成は、CSSルヌルに぀いおより倚くの掞察を䞎えるこずを目的ずしおいたす。

理論から始めたしょう


釘付けされたフッタヌの通垞の実装は、芁玠 BODYの盎接の子孫がHTMLタグで始たるすべおの芪が同じパヌセンテヌゞの高さを持぀堎合、りィンドりに察しおパヌセンテヌゞの高さ 高さ100たたは別を維持する䞀意のCSS2プロパティに基づいおいたす 。 以前は、Doctypeがなく、Quirksモヌドでは、芁玠のパヌセンテヌゞの高さはどのレベルでもサポヌトされ、珟代のDoctypeではパヌセント指定の芁玠内でのみサポヌトされおいたした。 したがっお、100の高さを持぀コンテンツブロック #layoutず呌びたしょうを䜜成するず、たるでりィンドりのようにスクロヌルしたす。 フッタヌずヘッダヌを陀き、すべおのストリヌミングコンテンツがそこに配眮されたす。

フッタヌはこのブロックの埌に配眮され、高さ0ピクセルになりたす。 䞀般に、 #layoutの埌に奜きなだけブロックを配眮できたすが、それらはすべお高さ0ピクセルから、たたはドキュメントフロヌの倖偎 䜍眮静的ではないでなければなりたせん。 そしお、通垞䜿甚される別の重芁なトリックがありたす。 高さを0にする必芁はありたせん。高さを固定するこずもできたすが、 margin-bottomプロパティのためにメむンナニットからそれを差し匕くこずができたす。- 高さ; 。

人間の蚀語では、スタむルによっおフッタヌが埋め蟌たれる空の「ポケット」が䜜成され、垞にフッタヌがりィンドりの䞋郚、たたはドキュメントがりィンドりの高さよりも高い堎合はドキュメントの䞋郚に貌り付けられたす。 むンタヌネット ずHabréには、倚くのフッタヌの実装があり、すべおのブラりザヌで異なる成功を収めおいたす。 Habrのレむアりトを「䞻力銬」ずしお䜿甚しお、私たちは匕き続き自分で構築しおいきたす。

#layoutブロックの䞋郚はポケットであるため、ペヌゞオブゞェクトを衚瀺せず、フッタヌ甚に空にする必芁がありたす。 そしお、ここでもう1぀の制限がありたす- #layoutの パディングのために空のポケットを䜜るこずはできたせん。 マヌゞンも保存されたせん-ネストされた芁玠のプロパティのために空にする必芁がありたす。 さらに、フロヌティング芁玠のブロックが境界の䞋に出ないようにする必芁がありたす。これは、たずえばブロックによっお行われたす
 <div class="clear"></div>
where .clear {clearboth} この「 高さ 」を固定するか、同じ盞察単䜍にするか、ペヌゞを倉曎するプロセスで蚈算するこずが重芁です。 通垞、このレベリングブロックず必芁な高さの蚭定を組み合わせるず䟿利です。

実隓のペヌゞの構造を芋おみたしょう。 これを行う最も簡単な方法は、ChromeでFirebugりィンドりたたは同様のりィンドり開発者ツヌルCtrl-F12を開くこずです。
 <!DOCTYPE html> <html xml:lang="ru" xmlns="http://www.w3.org/1999/xhtml"> <head> <body> <div id="topline">...  ...</div> <div id="layout"> <div id="header"> <div class="content_left">...=== ===...</div> <div class="sidebar_right">... ...</div> <div class="clear"></div> <!-- --> <div class="rotated_posts">...</div> <div id="footer"> <dl class="user">..<dl><!-- , --> <dl>...<dl> <dl>...<dl> <dl>...<dl> <dl>...</dl> <div class="copyright">...</div> </div> </div> <div id="AutocompleteContainter_ea125"></div> <!--  --> <div class="token-input-dropdown-hubs"></div> <div id="tiptip_holder" style="max-width:300px;"> <div id="jGrowl" class="top-right jGrowl"> </body> </html>


実際の䟋に移りたしょう。


釘付けされたフッタヌの効果に関するレむアりトの欠点は䜕ですか 私たちはそれを芋る
1サむトのフッタヌは、id = layoutのブロック内にあり、パヌセンテヌゞの高さはありたせん。 理論的には、圌、䞡芪、およびコンテンツブロック.content-leftは、高さを100に蚭定する必芁がありたす。 埌者では、問題が発生したす-圌はこれに適しおいたせん。 したがっお、1぀の䞭間局ブロックが欠萜しおいるか、フッタヌがそのレベルにありたせん。 たた
2フッタヌの高さは可倉ですリスト内の芁玠の数ずフォントサむズに䟝存したす。これはHTMLではなくCSSで確認できたす。 そしお
3 #layoutの䞊に、 90pxの固定高さの広告ナニットがありたす。
4フッタヌ、たたは䞀般的に蚀えば #layoutブロックに配眮ブロックはありたせんただし、 .rotated_postsブロックの䞊にありたすが、おそらくフッタヌに起因するはずです。

ポむント4-スクリプトを描画する必芁がありたす。
远加するこずで3番目の段萜を扱うのは簡単に思えたす
 #layout{margin-top:-90px;}
ただし、このブロックはそうではない可胜性があるこずに泚意しおください-バナヌの切り取りによっお抑制されおいるか、広告䞻が突然衚瀺しないこずを決定したす。 そうでないサむトには倚くのペヌゞがありたす。 そのため、広告ナニットぞのマヌゞントップの䟝存は悪い考えです。 #layout内に配眮するこずをお勧めしたす -䜕も邪魔したせん。

最初のポむントは、釘付けされたフッタヌが機胜するためには、フッタヌブロックを#layoutの䞋に配眮する必芁があるずいうこずです。 ただし、javascriptを䜿甚するず、他の釘付けされたフッタヌスキヌムを実装できたすが、いずれの堎合も、それを䜿甚しない堎合はJSたたは正しいレむアりトが必芁です。

コンテンツ内のフッタヌを「非難」したサむトの最埌のレむアりトデザむナヌよりも匷くなるこずはできないため、フッタヌを将来のサむトに正しく配眮するずいうアむデアを延期したすしたがっお、Habrよりも「クヌル」になりたすそしお、正しいスクリプトにHabrを準備したすナヌザヌスクリプト状態。 たずえば、レむアりトデザむナヌやスむッチマンではなく、サむトの倖芳がプロゞェクト管理の戊略的な決定を決定したす。したがっお、最初の1〜2秒でペヌゞが誀ったレむアりトで読み蟌たれるため、理想を達成するこずはできたせん。 しかし、私たちにずっお、ITの䞖界で最も人気のあるサむトの品質を凌ぐコンセプトず胜力は重芁です。

したがっお、スクリプトの適切な堎所以前、ペヌゞの読み蟌みの最埌で、広告ずフッタヌのDOMブロックの転送を適切な堎所に曞き蟌みたす。 ナヌザヌスクリプトのために、゜リュヌションは玔粋より耇雑になるずいう事実に備えたす。
 var dQ = function(q){return document.querySelector(q);} //  var topL = dQ('#topline'), lay = dQ('#layout'), foot = dQ('#footer'); if(topL && lay) // -    lay.insertBefore(topL, lay.firstChild); if(lay && foot && lay.nextSibling) //  lay.parentNode.insertBefore(footer, lay.nextSibling);

ブロックを配眮したす-必芁なプロパティを芁玠に割り圓おるために残りたす。 フッタヌの高さを正確に蚭定する必芁がありたす。これは、ナヌザヌスクリプトがアクティブになるペヌゞの読み蟌みが終了する時点ですでにわかっおいるためです。 前述のように、ナヌザヌスクリプトのトリガヌポむントにより、ペヌゞ䞊のフッタヌゞャンプは避けられたせん。 あなたは「良い顔」をしようずするこずができたすが、「悪いゲヌム」で なんで サむトの「悪いゲヌム」により、䜙分な劎力なしでコンセプトを䜜成できたす。これは、品質を評䟡するのに十分であり、プロゞェクトの「正しいゲヌム」では必芁ありたせん。
 if(foot){ //- <div class="clear"></div>   h.apnd_el({clss:'clear', appendTo: footer}); var footH = foot.offsetHeight; //...    } if(topL && lay && footer && lay.nextSibling){ //      ("") h.apnd_el({clss:'clear', css:{height: (footH ||0) +'px'}, appendTo: lay}); lay.style.minHeight ='100%'; h.addRules('#layout{margin-bottom:-'+ footH +'px!important}html, body {height:100%}'); }

ここでは、jQueryずほが同じである自己蚘述関数h.apnd_elの䜿甚を蚱可したした-
 $('<div class="clear"></div>').css({height: footH ||0}).appendTo($(footer))

そしおさらに-CSSのルヌルの実装のもう1぀の兞型的な機胜-h.addRules 。 ここでは、「 重芁 」でルヌルを宣蚀する必芁があるため、これなしでは実行できたせん-ナヌザヌスクリプトからのスタむルの優先順䜍の特性のためだけです。

これらのコヌドを䜿甚するず、ナヌザヌスクリプトに釘付けされたフッタヌが衚瀺されゞャンプした埌、ペヌゞレむアりトの䜜成方法を完党に理解できたす。 ゞャンピングデザむンを毎日䜿甚するのは䞍快です。したがっお、デモンストレヌションずテストのためだけに䜿甚するこずをお勧めしたす。 HabrAjax ナヌザヌスクリプトに、バヌゞョン0.883_2012-09-12から始たる「underFooter」蚭定蚭定リストの「footed to the bottom」の前に「checkmark」を蚭定で閉じる同様のスクリプトをむンストヌルしたした。

釘付けされた足は、むンストヌルされおいる堎合、 ZenCommentスタむルを曎新する必芁性に圱響したすか はい、そうです。 ナヌザヌスクリプトによっお挿入されたスタむルの優先順䜍が最も䜎いスタむルの優先順䜍の耇雑なチェヌンのため、釘付けされたフッタヌを䜿甚できるようにナヌザヌスタむルをわずかに調敎する必芁がありたした。 ナヌザヌスタむルを曎新しない堎合最倧2.66_2012-09-12 +、フッタヌは正確に機胜したせん。

rotate_postブロック 過去の人気のある3぀の投皿はフッタヌでより論理的に芋えるため、実際のスクリプトではフッタヌにも転送されたす。

2番目の項目レむアりトの欠陥のリストからは、玔粋にHabrの理由ですナヌザヌスクリプトには適甚されず、前のものを郚分的に繰り返したす。

ペヌゞには、玔粋なCSSで釘付けフッタヌを䜜成できないずいう問題がありたす。フッタヌの高さは、ブラりザヌのデフォルトのフォントサむズによっお異なりたす。 CSSにフッタヌを実装するには、盞察的なフォントの高さを遞択する必芁がありたすが、ナヌザヌのコンピュヌタヌにフォントが提䟛されおいない堎合は機胜しない堎合がありたす。 したがっお、゜リュヌションには、フッタヌのおよその䜍眮に遷移を䞀臎させるこずができるjavascriptを含める必芁がありたす。 たたは、異なるプラットフォヌムのナヌザヌスクリプトで行われた決定の受け入れ可胜性を芋お、釘付けされたフッタヌの蚈算されたむンストヌルを行いたす-最初の芳察は、゜リュヌションが実甚的であるこずを瀺しおいたす。

結論Habréでレむアりトを完党に配眮できたすが、このためには、レむアりトの動䜜を明確に理解し、正しい順序でブロックを配眮するレむアりトデザむナヌが必芁です。 フッタヌずトップバナヌは、スタむルに釘付けされたフッタヌを取埗するためだけでなく、「そこにありたせん」。フッタヌの高さを盞察的な単䜍で蚭定するず、フォントが䞍確実になりたす。

実装


HabrAjax 0.883+を有効にするず、「固定フッタヌ」の動䜜が衚瀺されたす。 スクリプトを䜿甚しお高さを調敎したす。 通垞のフッタヌず比范しお、フッタヌが釘付けされたペヌゞがどれだけ優れおいるかを評䟡できたす。 ZenCommentのナヌザヌスタむルはスクリプトず互換性がありたすが 、釘付けされたフッタヌを適切に機胜させるには、ZenCommentバヌゞョン2.66_2012-09-12 +をむンストヌルする必芁がありたす。

実装動䜜の事実


フッタヌ、スタむル、スクリプトを䜿甚したシャヌマニズムはシャヌマニズムです理論によっおのみ匷化されたす。 ブラりザによっお動䜜が少し異なりたすが、堎所によっおは-予想倖です。 ナヌザヌスクリプトずブロックの再配眮がなければ、結果は異なりたす。 以䞋に、ナヌザヌスクリプトでの実装の実隓で埗たものを瀺したす。

1Firefox-フッタヌゞャンプの予期しない䞍足。 それらが存圚しないのは奇劙です-フッタヌを䞋郚に配眮した埌にレンダリングが行われたす。

2Chrome-圌は「さたよえるスクロヌル」に驚いた-1秒に1回の呚期で䞋の空のスペヌスがペヌゞに远加される-高さの蚈算で䜕かがおかしい。 html、body {height100}をナヌザヌスタむルで蚘述するこずで凊理されたすが、垞に機胜するずいう保蚌はありたせん。 より信頌できるのは、ドキュメントがりィンドりの高さを超えおいないかどうかを確認し、超えおいない堎合はフッタヌを移動し、そうでない堎合は䜕もしないこずです。 ゞャンプで-すべおが順調です、そうです。

3Opera-最初のペヌゞの読み蟌みではゞャンプv。12.02はありたせんが、急いでリロヌドするずフッタヌのゞャンプが衚瀺される堎合がありたす。 残りはFxず同じくらい正確です。

たあ、Chromeをスクリプトを䜿甚しお正しく動䜜するように特別にトレヌニングし、この圢匏でレビュヌ甚にバヌゞョンをロヌルアりトする必芁がありたす。 したがっお、ナヌザヌスクリプトのセクションは、蚘事で説明されおいるセクションよりも少し耇雑です。

これは完党な実装ではないこずを思い出しおください。たずえば、ナヌザヌがりィンドりのサむズを倉曎する堎合は考慮されたせん。 たた、移動の前埌にフッタヌの高さを倉曎するずいう実際にはたれな組み合わせを芋぀けるこずもできたす。この堎合、䞍郜合が生じるこずなく、ロゞックが倱敗し始めたす。 掗緎の耇雑さず゜リュヌションの䞀時性のバランスが尊重されるため、欠陥は意図的に残されたした。

その結果、少なくずも高速の固定コンピュヌタヌでは、完党に機胜する䜜業スキヌムであるこずが刀明したした。 䞍正なフッタヌの動䜜が怜出された堎合、「underFooter」蚭定を無効にする必芁がありたす。

これはどのペヌゞに圹立ちたすか


ナヌザヌスタむルのない暙準サむトでは、短いペヌゞの質問ず回答でさえ1500pxよりも長くなりたす。これはほずんどの堎合、氎平に配眮されたモニタヌでは感知できたせん。 しかし、普通のモニタヌでも、高さ玄1300ピクセルのナヌザヌの個人ペヌゞがよく芋られたす。そこでは、無敵のフッタヌが栄光の䞭で珟れたす。 非垞に長くなく、ナヌザヌ蚭定のペヌゞ数。

ZenCommentナヌザヌスタむルを䜿甚するず、必芁なペヌゞの高さが倧幅に削枛され、HabrAjaxナヌザヌスクリプトはサむドバヌのサむドブロックの䞀郚たたはすべおを衚瀺しない堎合がありたす。 したがっお、スクリプトずスタむルを䜿甚するず、無敵のフッタヌの効果がより頻繁に芳察されたす。 したがっお、HabrAjaxでフッタヌ修正が初めお登堎したのは論理的です。 しかし、通垞のサむトには、釘付けされたフッタヌが圹立぀倚くのペヌゞがありたす。

サポヌトはありたすか




過去1幎間のサむトの動䜜は、開発者および管理者が、以前はナヌザヌスクリプトずナヌザヌスタむルのみに存圚しおいた機胜を導入し始めたこずを瀺しおいたす。 たずえば、幎の初めにHabrの䜿いやすさに関する蚘事のレビュヌを曞きたした 。そこでは倚くの小さな願いを集めたした。 6か月埌、私は圌女に戻っお、垌望ずしお蚘述された倚くの機胜がすでにサむトに実装されおいるこずを満足しおテキストで盎接。「UPD」ず日付を読むこずができたす指摘したした。

次に、コメントを評䟡するために、正方圢ではなく「矢印」を芋おください。 圌らはナヌザヌalmalexa  "Prettifier"に玄3幎前に登堎し、玄2幎前にZenCommentに転送されたした。 箄2〜3か月前、サむトに登堎したした。 ZenCommentで行われおいるように、ミスを少なくするために、しばらくするず矢印がある皋床の距離に広がるず考えられ始めおいたす数字の巊に1぀の矢印、右に2番目の矢印。

したがっお、おそらく、Habréの「釘付けされたフッタヌ」は、玄3幎前に芋えたほど玠晎らしいものではありたせん。

過去3か月間に衚瀺されたHabrAjaxスクリプトのその他の機胜 蚭定で無効になっおいたす
* autostat入力フィヌルド Operaでは、倧きなテキストでは速床が䜎䞋する堎合がありたす;
*「今日」ず「昚日」以倖の日付の曜日。
*テヌプ内のむベント、 1行2文字に折りたたみ可胜 。
*「Habr *」ずいう単語の「χ・」および「χα」ぞの略語。
* 蚘事番号の日付のヒント-URLの番号によっお、蚘事がダりンロヌドされる前の月ず幎が報告されたす。
* 「類䌌の投皿」を2単語に最小化したした 。 ポップアップ「類䌌の投皿」のスクリヌンショット 4ではなく12のリンクを衚瀺。

Source: https://habr.com/ru/post/J151320/

More articles:


All Articles