ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ html
Π£Π·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ «ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅» ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π²Π΅ΡΡ Π½Π΅Π΅ ΠΌΠ΅Π½Ρ
Π¨Π°Π³ 1) Π΄ΠΎΠ±Π°Π²ΠΈΡΡ HTML:
ΠΡΠΈΠΌΠ΅Ρ
Some text some text some text some text..
Π¨Π°Π³ 2) Π΄ΠΎΠ±Π°Π²ΠΈΡΡ CSS:
ΠΡΠΈΠΌΠ΅Ρ
/* The navigation bar */
.navbar <
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
>
/* Links inside the navbar */
.navbar a <
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>
/* Change background on mouse-over */
.navbar a:hover <
background: #ddd;
color: black;
>
/* Main content */
.main <
margin-top: 30px; /* Add a top margin to avoid content overlay */
>
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π½ΠΈΠΆΠ½Π΅Π΅ ΠΌΠ΅Π½Ρ
Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π½ΠΈΠΆΠ½Π΅Π΅ ΠΌΠ΅Π½Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ position:fixed ΠΈ bottom:0 :
ΠΡΠΈΠΌΠ΅Ρ
/* The navigation bar */
.navbar <
position: fixed; /* Set the navbar to fixed position */
bottom: 0; /* Position the navbar at the bottom of the page */
width: 100%; /* Full width */
>
/* Main content */
.main <
margin-bottom: 30px; /* Add a bottom margin to avoid content overlay */
>
Π‘ΠΎΠ²Π΅Ρ: Π§ΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΠΏΠ°Π½Π΅Π»ΡΡ , ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² Π½Π°Ρ Π£ΡΠ΅Π±Π½ΠΈΠΊ CSS Navigation.
Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½Π° CSS, jQuery + ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΡΠΊΠΎΡΡΠΌΠΈ

Π ΡΡΠ°ΡΡΠ΅ Ρ Π½Π΅ Π±ΡΠ΄Ρ Π²Π΄Π°Π²Π°ΡΡΡΡ Π² ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ Π²ΡΠ΅Ρ Π΄Π΅ΡΠ°Π»Π΅ΠΉ ΠΊΠΎΠ΄Π°, ΡΠΊΠ°ΠΆΡ Π»ΠΈΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ Π½ΡΠ°Π½ΡΡ. ΠΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈ ΠΏΠΎΠΏΡΠ°ΠΊΡΠΈΠΊΠΎΠ²Π°ΡΡΡΡ Ρ Π½ΠΈΠΌΠΈ Π½Π° ΡΠ²ΠΎΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ , Π½Ρ Π° ΠΏΠΎΠ»Π½ΡΠΌ Π½ΠΎΠ²ΠΈΡΠΊΠ°ΠΌ β Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π³Π»ΡΠ½ΡΡΡ ΡΠ΅ΡΠ²ΠΈΡ ΠΎΠ±ΡΡΠ΅Π½ΠΈΡ Π²Π΅ΡΡΡΠΊΠ΅ Interneting is Hard.
Π ΠΏΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ ΡΠ°ΠΊΠΈΠ΅ Π²ΠΎΠΏΡΠΎΡΡ:
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½Π° CSS + HTML
Π ΠΎΠ±ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π° position:fixed ΠΈ top:0. Π’Π°ΠΊΠΆΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌΡ Π±Π»ΠΎΠΊΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΏΡΠΈΠ΄Π΅ΡΡΡ Π·Π°Π΄Π°ΡΡ Π²Π΅ΡΡ Π½ΠΈΠΉ ΠΎΡΡΡΡΠΏ margin-top.
ΠΡΠ°ΠΊ, Π²ΠΎΠ·ΡΠΌΠ΅ΠΌ ΠΏΡΠΎΡΡΡΡ ΡΡΡΡΠΊΡΡΡΡ HTML ΡΡΡΠ°Π½ΠΈΡΡ:
ΠΠ°ΠΊΠΎΠΉ-ΡΠΎ ΡΠ΅ΠΊΡΡ Π΄Π»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°.
Π ΡΠ°ΠΉΠ» ΡΡΠΈΠ»Π΅ΠΉ CSS Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΠ΅:
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ ΡΠ°ΠΊΠ°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°:
ΠΠΈΡΠ΅Π³ΠΎ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎΠ³ΠΎ, Π½ΠΎ Π³Π»Π°Π²Π½ΠΎΠ΅, ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. ΠΠ°Π±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΡΡΠ΅ΠΊΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ΅ΠΊΡΡΠ° Π² Π±Π»ΠΎΠΊ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° (ΡΡΠΎΠ±Ρ ΠΏΠΎΡΠ²ΠΈΠ»Π°ΡΡ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ).
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ Π΄Π΅ΡΠ°Π»ΠΈ ΠΊΠΎΠ΄Π° Π²ΡΡΠ΅, ΠΊΠ°ΠΊ Ρ ΡΠΆΠ΅ Π³ΠΎΠ²ΠΎΡΠΈΠ», ΡΡΠΎ position:fixed, top:0 ΠΈ margin-top: 60px. ΠΠ΅ΡΡ Π½ΠΈΠΉ ΠΎΡΡΡΡΠΏ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π΄ΡΡΠ³ΠΈΠΌ, Π΅ΡΠ»ΠΈ Π²ΡΡΠΎΡΠ° ΠΌΠ΅Π½Ρ Ρ Π²Π°Ρ ΠΌΠ΅Π½ΡΡΠ΅/Π±ΠΎΠ»ΡΡΠ΅.
ΠΡΡΠ°ΡΠΈ, Π΅ΡΠ»ΠΈ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΌΠ΅Π½Ρ Π²Π½ΠΈΠ·Ρ ΡΡΡΠ°Π½ΠΈΡΡ, Π·Π°ΠΌΠ΅Π½ΡΠ΅ΡΠ΅ ΠΊΠΎΠ΄ Π½Π°:
ΠΡΠ΅ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅, ΡΠΎΠ»ΡΠΊΠΎ Π²ΠΌΠ΅ΡΡΠΎ top ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ bottom:0. ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅, Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ³ΡΠ³Π»ΠΈΡΡ ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΡΡΡΡΠΏ ΠΊΠΎΠ½ΡΠ΅Π½ΡΡ ΡΠ½ΠΈΠ·Ρ ΡΡΠΎΠ±Ρ ΠΎΠ½ ΡΠΎΡ ΡΠΊΡΡΠ²Π°Π»ΡΡ Π·Π° ΠΏΠ»Π°ΡΠΊΠΎΠΉ ΠΌΠ΅Π½Ρ. Π Π΅ΡΠ΅Π½ΠΈΠ΅ Ρ margin-bottom:30px; ΠΏΠΎΡΠ΅ΠΌΡ-ΡΠΎ Π½Π΅ ΡΡΠ°Π±ΠΎΡΠ°Π»ΠΎ.
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ jQuery ΠΈ CSS
ΠΡΠΎΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΡΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΠΉ β Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ jQuery. ΠΠ½Π° Π²ΡΡΡΠ΅ΡΠ°Π΅ΡΡΡ Π½Π° ΠΌΠ½ΠΎΠ³ΠΈΡ ΡΠ°ΠΉΡΠ°Ρ , ΠΏΠ»ΡΡ Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² WordPress ΠΈ Π΄ΡΡΠ³ΠΈΡ CMS ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½Π° ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ. ΠΠ· Javascript ΡΡΠ½ΠΊΡΠΈΠΉ Π·Π΄Π΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π²ΡΠ΅Π³ΠΎ 2, ΠΏΠΎΡΡΠΎΠΌΡ Π΄Π°Π½Π½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΈΡΠ°ΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π»Π΅Π³ΠΊΠΈΠΌ ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΈΠ· ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°. ΠΠΎΡ ΡΡΠΎ Π² ΠΈΡΠΎΠ³Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡΡΡ:
ΠΠ»Π³ΠΎΡΠΈΡΠΌ Π²Π½Π΅Π΄ΡΠ΅Π½ΠΈΡ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ Ρ jQuery ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· ΡΡΠ΅Ρ ΡΠ°Π³ΠΎΠ². ΠΠ΅ΡΠ²ΡΠΌ Π΄Π΅Π»ΠΎΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ HTML ΠΊΠΎΠ΄:
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π²Π½Π΅Π΄ΡΠΈΡΡ Π΄Π°Π½Π½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ Π½Π° ΡΠΆΠ΅ Π³ΠΎΡΠΎΠ²ΠΎΠ΅ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΡΡΡ 2 ΠΏΡΡΠΈ: Π»ΠΈΠ±ΠΎ Π² CSS ΠΈ JS Π½ΠΈΠΆΠ΅ ΠΏΠΎΠ΄ΡΡΠ°Π²Π»ΡΠ΅ΡΠ΅ ΡΠ²ΠΎΠΈ ΡΡΠΈΠ»ΠΈ, Π»ΠΈΠ±ΠΎ ΠΏΠΎΠ΄Π³ΠΎΠ½ΡΠ΅ΡΠ΅ ΠΈΠΌΠ΅ΡΡΠΈΠΉΡΡ HTML ΠΏΠΎΠ΄ Π²Π°ΡΠΈΠ°Π½Ρ ΡΠ²Π΅ΡΡ Ρ.
Π ΡΡΠΈΠ»ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΡΡΠΎΠΊΠΈ:
ΠΡΠΎΠΌΠ΅ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΡΠΈΠΊΡΠ°ΡΠΈΠΈ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π΅ΡΡΡ CSS Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΡΡΠ»ΠΎΠΊ Π² ΠΎΠ΄Π½Ρ ΡΡΡΠΎΠΊΡ.
ΠΠΎΠ³ΠΈΠΊΠ° ΡΠ°Π±ΠΎΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ ΡΠ»Π΅Π΄ΡΡΡΠ°Ρ β ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΈΠ»ΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ Π½ΠΈΠΆΠ΅ 136 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ²Π΅ΡΡ Ρ, ΡΠΎ Π΄Π»Ρ ΠΌΠ΅Π½Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΠΊΠ»Π°ΡΡ f-nav, Π° Π² Π½Π΅ΠΌ ΠΏΡΠΎΠΏΠΈΡΠ°Π½Ρ Π·Π½Π°ΠΊΠΎΠΌΡΠ΅ Π½Π°ΠΌ position:fixed ΠΈ top:0.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ Π² 136 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π²Π°ΡΠ΅Π³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΡΠ΅ΡΠ΅ Π΄Π°Π½Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π² ΡΠ²ΠΎΠ΅ Π³ΠΎΡΠΎΠ²ΠΎΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½Π° ΡΠ°ΠΉΡΠ΅, ΡΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΠΉΡΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² Π² JS ΠΈ CSS. ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΈ ΠΊΠ°ΠΊΠΈΠ΅-ΡΠΎ Π½ΡΠ°Π½ΡΡ Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠ΅ΠΉ ΠΊΠΎΠ΄Π°, Π·Π°Π³Π»ΡΠ½ΠΈΡΠ΅ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΊ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ β ΡΠ°ΠΌ Π΅ΡΡΡ ΠΏΠ°ΡΠΎΡΠΊΠ° ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΎΠΊ.
ΠΠ°ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠΊ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Ρ Π΅ΡΠ΅ ΠΎΠ΄Π½ΠΈΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π½Π°ΡΠ΅ΠΉ Π·Π°Π΄Π°ΡΠΈ. ΠΠ΅ Π±ΡΠ΄Ρ ΠΎΡΠΎΠ±ΠΎ Π΄Π΅ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ, ΠΏΡΠΎΡΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ Π²ΡΡΠ°Π²ΠΊΡ ΠΈΠ· ΠΎΠ½Π»Π°ΠΉΠ½ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° ΠΊΠΎΠ΄Π° Codepen.
ΠΡΠΎΠΊΡΡΡΠΊΠ° Π΄ΠΎ ΡΠΊΠΎΡΡ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΌΠ΅Π½Ρ
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° ΠΏΠ°ΡΡ ΡΠ»ΠΎΠ² ΠΎ ΡΠ°ΠΌΠΎΠΉ Π·Π°Π΄Π°ΡΠ΅. ΠΠΎΠΏΡΡΡΠΈΠΌ Ρ Π²Π°Ρ Π΅ΡΡΡ ΡΠ°ΠΉΡ, Π³Π΄Π΅ Π²Ρ ΡΠ΅ΡΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅. ΠΡΠΈ ΡΡΠΎΠΌ Π² Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΈΠ»ΠΈ ΡΠ΅ΠΊΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ°ΠΊ Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΠ΅ ΡΠΊΠΎΡΡ (Anchor). ΠΡΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π΅ ΠΏΠΎ ΡΡΠΈΠΌ ΡΡΡΠ»ΠΊΠ°ΠΌ ΡΠΊΡΠ°Π½ ΡΡΡΠ°Π½ΠΈΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΊ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΌΠ΅ΡΡΠ°ΠΌ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ (Π³Π΄Π΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΡΠΊΠΎΡΡ). ΠΠ΄Π½Π°ΠΊΠΎ Π² ΡΠ°ΠΊΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ°ΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π·Π°ΠΊΡΡΠ²Π°Π΅ΡΡΡ Π±Π»ΠΎΠΊΠΎΠΌ ΠΌΠ΅Π½Ρ.
ΠΠ°Π½Π½Π°Ρ ΡΠΈΡΡΠ°ΡΠΈΡ ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ Π² Π»Π΅Π½Π΄ΠΈΠ½Π³Π°Ρ . ΠΠ° ΡΠΊΡΠΈΠ½ΡΠΎΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Π·Π°ΠΌΠ΅ΡΠ½Π° Π±ΠΎΠ»Π΅Π΅ Π½Π°Π³Π»ΡΠ΄Π½ΠΎ:
ΠΠ° StackOverflow Π½Π°ΠΉΠ΄Π΅Π½ΠΎ Π΄Π²Π° ΡΠ΅ΡΠ΅Π½ΠΈΡ Π·Π°Π΄Π°ΡΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ Π»ΠΈΡΡ CSS.
Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΊΠΎΡΡ Ρ ΠΎΡΡΡΡΠΏΠΎΠΌ ΠΏΠ΅ΡΠ²ΡΠΌ Π΄Π΅Π»ΠΎΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π΅ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΡΡΠΈΠ»Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, anchor:
Some text
ΠΠ°Π»Π΅Π΅ Π΄Π»Ρ Π½Π΅Π³ΠΎ Π² ΡΡΠΈΠ»ΡΡ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΠ΅:
ΠΠ΄Π΅ΡΡ 55 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ β Π²ΡΡΠΎΡΠ° ΠΌΠ΅Π½Ρ + ΠΎΡΡΡΡΠΏ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½ΡΠΆΠ½Ρ ΡΡΠΎΠ±Ρ ΡΠ΅ΠΊΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π±ΡΠ» Π²ΠΈΠ΄Π΅Π½. Π£ΠΊΠ°Π·ΡΠ²Π°ΠΉΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠ΅ Π²Π°ΡΠ΅ΠΌΡ ΡΠ°ΠΉΡΡ. Π ΡΠ°Π±ΠΎΡΠ΅ Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ» ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡΠΎΡ Π²Π°ΡΠΈΠ°Π½Ρ.
ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ ΡΠ΅ΡΠ΅Π· padding, ΡΠ°ΠΌ Π²ΠΎΠΎΠ±ΡΠ΅ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ ΠΎΠ΄Π½Π° ΡΡΡΠΎΠΊΠ° ΠΊΠΎΠ΄Π°:
Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ Π³Π»ΡΠ½ΡΡΡ ΡΡΡ Π·Π°ΠΌΠ΅ΡΠΊΡ Π³Π΄Π΅ Π°Π²ΡΠΎΡ ΠΏΡΠΈΠ²Π΅Π» ΡΡΠ°Π·Ρ 5 ΡΠ°Π·Π½ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΊΠΎΡΡ Ρ ΠΎΡΡΡΡΠΏΠΎΠΌ Π΄Π»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ: ΡΠ΅ΡΠ΅Π· ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½Π΅Π³Π°ΡΠΈΠ²Π½ΡΠ΅ ΠΎΡΡΡΡΠΏΡ ΠΈ Ρ.ΠΏ.
ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ + ΡΠΊΠΎΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ (Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ)
Π£ΠΆΠ΅ ΠΏΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡ Π²ΠΈΠ΄Π½ΠΎ, ΡΡΠΎ ΡΠΈΡΡΠ°ΡΠΈΡ Ρ ΠΌΠ΅Π½Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ»Π° Π½Π΅ ΠΏΡΠΎΡΡΠ°Ρ. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΈ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊΠΎΠ΅-ΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ·ΡΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, Π½ΠΎ Π·Π° Π΄Π΅Π½Ρ ΠΏΠΎΠΈΡΠΊΠΎΠ² Π½ΠΈΡΠ΅Π³ΠΎ Π»ΡΡΡΠ΅ Π½Π°ΠΉΡΠΈ Π½Π΅ ΡΠ΄Π°Π»ΠΎΡΡ. ΠΠ½ΠΎ Π΅ΡΠ΅ ΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² ΠΎΡΠ»ΠΈΡΠΈΠΈ ΠΎΡ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ !
ΠΠ°ΡΡ ΡΠ»ΠΎΠ² ΠΎ ΡΠ°ΠΌΠΎΠΉ Π·Π°Π΄Π°ΡΠ΅. ΠΠΎΡ ΠΊΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΌΠΎΠ΅ ΠΌΠ΅Π½Ρ:
Π― ΠΏΠ΅ΡΠ΅ΠΏΡΠΎΠ±ΠΎΠ²Π°Π» ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°Π·Π½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ²: ΠΈ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΡΠ΄Π²ΠΈΠ³ ΡΠΊΠΎΡΡ Π²Π½ΠΈΠ· ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS, ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ, ΡΡΠ°Π±Π°ΡΡΠ²Π°ΡΡΠ΅ΠΉ ΠΏΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Easy Table of Contents, Π½ΠΎ Π±Π΅Π·ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ½ΠΎ.
Π‘Π»ΠΎΠΆΠ½ΠΎΡΡΡ Π±ΡΠ»Π° Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ±Π° Π΄Π΅ΠΉΡΡΠ²ΠΈΡ (ΡΠΊΠΎΡΡ ΠΈ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ) Π±ΡΠ»ΠΈ ΠΏΡΠΈΠ²ΡΠ·Π°Π½Ρ ΠΊ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠ΅ ΡΠΎΠ±ΡΡΠΈΡ scroll. Π― ΠΏΡΡΠ°Π»ΡΡ ΠΈΡ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ, Π½ΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ Π½Π° ΡΠΊΠΎΡΠ½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ Π²Π»ΠΈΡΠ» Π½Π° scroll. Π§ΠΈΡΠ°Π», ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠ΅ ΡΠΊΠΎΡΡ Π±Π΅Π· ΠΏΠ΅ΡΠ΅Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ hashchange, Π½ΠΎ Π² ΡΡΡ ΡΠ΅ΠΌΡ Π½Π΅ ΡΠΈΠ»ΡΠ½ΠΎ Π²Π½ΠΈΠΊΠ°Π» (Ρ ΠΎΡΡ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½ΠΈΠΆΠ΅ ΡΡΠ° ΡΠΈΡΠΊΠ° ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ).
Π ΠΈΡΠΎΠ³Π΅ ΠΌΠ½Π΅ ΠΏΠΎΠΌΠΎΠ³Π»Π° ΡΡΠ° Π·Π°ΠΏΠΈΡΡ Π½Π° Stackoverflow. ΠΠΈΠΆΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π° Π²Π΅ΡΡΠΈΡ Ρ jQuery Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ Π³Π»Π°Π΄ΠΊΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°. ΠΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΡΠ»Π΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° Π½Π° ΡΠΊΠΎΡΡ βΠΎΡΠΌΠΎΡΠ°ΡΡβ Π½Π°Π·Π°Π΄ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠΊΡΠ°Π½Π° ΡΡΠΎΠ±Ρ ΠΌΠ΅Π½Ρ Π΅Π³ΠΎ Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°Π»ΠΎ.
ΠΠΎΡ ΡΠ°Π±ΠΎΡΠ°ΡΡΠΈΠΉ ΡΠΈΠ½Π°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ΄ + Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ:
ΠΡΠΎΠ΄ΡΠ±Π»ΠΈΡΡΡ Π½Π° Π²ΡΡΠΊΠΈΠΉ ΡΠ»ΡΡΠ°ΠΉ Π΅Π³ΠΎ Π² ΡΡΠ°ΡΡΠ΅. ΠΠΎ HTML Π½ΠΈΡΠ΅Π³ΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΠ³ΠΎ β ΡΠ½Π°ΡΠ°Π»Π° ΠΈΠ΄Π΅Ρ ΠΌΠ΅Π½Ρ, Π° Π·Π°ΡΠ΅ΠΌ 5 ΡΠ°Π·Π½ΡΡ Π±Π»ΠΎΠΊΠΎΠ² DIV.
Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΡΠ°ΡΡΠΎ Π½Π°Π·ΡΠ²Π°ΡΡ Β« Π»ΠΈΠΏΠΊΠΈΠΌ Β» ΠΌΠ΅Π½Ρ, ΠΏΠΎΡΠΎΠΌΡ ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΡΡΡΡ, ΠΏΠΎΠΌΠΈΠΌΠΎ ΡΠ°ΠΌΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ΠΎ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΡΠ°Π΅ΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
ΠΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½Π°Ρ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ°, ΠΊΠΎΠ³Π΄Π° Π² ΡΠ°Π±Π»ΠΎΠ½Π½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎ ΡΠ°ΠΉΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΌΠ΅Π½Ρ, Π΄Π° ΠΈ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅Π½Ρ.
Π‘ΡΡΠΎΠΊΠ° ΠΏΠΎΠΈΡΠΊΠ°, ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΠ΅ΠΉ, Π²ΡΠ΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΡ. ΠΠΎΠ΄ΠΎΠ±Π½ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½ Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ, ΡΡΠΎ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΠΉΡΠ° Π±ΡΠ΄ΡΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ Π² Π»Π΅Π³ΠΊΠΎΠ΄ΠΎΡΡΡΠΏΠ½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, Π³Π΄Π΅ ΠΈΠΌΠ΅Π½Π½ΠΎ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π² Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ.
ΠΡΠΈΠΌΠ΅ΡΡ
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π½Π°ΡΠ°ΡΡ, ΠΌΡ Π²Π·Π³Π»ΡΠ½Π΅ΠΌ Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΉΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ, ΠΏΡΠΎΡΡΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅.
ΠΠΈΠΆΠ΅ Ρ ΠΏΡΠΈΠ²ΠΎΠΆΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠ»ΠΎΠΊ.
Π Niice ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π² ΡΠ΅Π±Π΅ ΠΎΠΊΠ½ΠΎ ΠΏΠΎΠΈΡΠΊΠ° ΠΈ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎ ΡΠ°ΠΉΡΡ. ΠΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ², Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π±ΡΡΡΡΠΎ ΡΠΈΠ»ΡΡΡΠΎΠ²Π°ΡΡ ΠΈΡ , Π½Π΅ ΠΏΡΠ΅ΡΡΠ²Π°ΡΡΡ Π½Π° ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠ°ΠΉΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΎΠΊΠ½ΠΎ ΠΏΠΎΠΈΡΠΊΠ° Π² Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΠΊΡΠ°Π½Π°:
Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΎΡΠ° 99U Π²ΡΡΡΠΎΠΈΠ»ΠΈ Π² Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ. ΠΠΎ Π²ΡΠ΅ΠΌΡ ΡΡΠ΅Π½ΠΈΡ Π½ΠΎΠ²ΠΎΡΡΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ΅ΡΡΡΡΠ° ΠΈΠΌΠ΅Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΌΠΎΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° Π² Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠΉ Π΅ΠΌΡ ΡΠ°Π·Π΄Π΅Π» ΡΠ°ΠΉΡΠ°:
Π‘Π°ΠΉΡ Forbes.com ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΠ» ΠΌΠ΅Π½Ρ, ΡΠΈΡΡΠ΅ΠΌΡ ΠΏΠΎΠΈΡΠΊΠ° ΠΏΠΎ ΡΠ°ΠΉΡΡ ΠΈ Π²ΠΈΠ΄ΠΆΠ΅Ρ Π΄Π»Ρ Π°Π²ΡΠΎΡΠΈΠ·Π°ΡΠΈΠΈ Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΡΠΈΡΠ°ΡΡΠ΅ΠΌΡ Π½ΠΎΠ²ΠΎΡΡΠΈ ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎ Π±ΡΡΡΡΠΎΠ³ΠΎ Π΄ΠΎΡΡΡΠΏΠ°.
ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π±ΡΡΡΡΠΎ ΠΏΡΡΠ³Π°ΡΡ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΡΠ°ΡΡΠ΅ ΠΏΠΎΡΠ»Π΅ ΠΏΡΠΎΡΡΠ΅Π½ΠΈΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ. Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅Ρ Π²ΡΠ΅ΠΌΡ Π½Π°Ρ ΠΎΠΆΠ΄Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π° ΡΠ°ΠΉΡΠ΅, ΠΏΠΎΡΠΎΠΌΡ ΠΊΠ°ΠΊ ΡΠΈΡΠ°ΡΠ΅Π»ΠΈ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΌΠ΅Π½Ρ Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° ΡΠ²Π΅ΠΆΠΈΡ Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ:
Π, ΠΊΠ°ΠΊ Ρ ΠΎΡΠΎΡΠΎ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°, Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ ΡΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠΎΠ²ΡΡΠ°Π΅Ρ ΡΠ·Π°Π±ΠΈΠ»ΠΈΡΠΈ ΡΠ°ΠΉΡΠ° Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ ΡΠ°Π·Π½ΠΎΠΎΠ±ΡΠ°Π·Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°.
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ ΡΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ±, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠΉ ΡΠΎΠΊΡΠ°ΡΠΈΡΡ Π²ΡΠ΅ΠΌΡ, ΠΏΠΎΡΡΠ°ΡΠ΅Π½Π½ΠΎΠ΅ Π½Π° ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΎΡ ΠΎΠ΄Π½ΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ ΠΊ Π΄ΡΡΠ³ΠΎΠΉ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΡΠ°ΠΉΡΠΎΠΌ ( ΠΏΠΎΠΈΡΠΊ, Π°Π²ΡΠΎΡΠΈΠ·Π°ΡΠΈΡ, ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΡΡΡΠΊΡΡΡΠ΅ ). ΠΠΎΠ²ΠΎΡΡ ΠΏΠΎ-ΡΡΡΠ΅ΡΡΠ²Ρ, ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΏΠΎΠ²ΡΡΠ°Π΅Ρ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ ΡΠ°ΠΉΡΠ°, ΠΏΡΠΈΠΌΠ΅Π½ΡΡ Π·Π°ΠΊΠΎΠ½Ρ Π€ΠΈΡΡΡΠ° :
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅Π»ΠΈ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΈ ΠΎΡΠΎΠ·Π½Π°Π»ΠΈ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ ΡΠΈΠΏΠ°, ΠΏΡΠΈΡΡΡΠΏΠΈΠΌ, Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ, ΠΊ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ ΡΠ°Π±ΠΎΡΡ Π½Π°ΡΠ΅Π³ΠΎ ΠΎΠ½Π»Π°ΠΉΠ½ β ΡΠ΅ΡΡΡΡΠ°.
ΠΠΈΠΆΠ΅ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅:
ΠΠ ΠΠ‘ΠΠΠ’Π ΠΠ’Π¬ ΠΠΠΠ
Π‘ΠΠΠ§ΠΠ’Π¬ ΠΠ‘Π₯ΠΠΠΠΠΠ Π‘ GITHUB
ΠΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ GitHub Repository
Π Π°Π·ΠΌΠ΅ΡΠΊΠ° ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ β ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±Π»ΠΎΡΠ½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ, Π² ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ:
ΠΠΎΠ³Π΄Π° ΠΌΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position ΡΠ°Π²Π½ΡΠΌ fixed ΠΏΠ°Π½Π΅Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΡΠΎ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅:
ΠΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ° : Π΅ΡΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π² Β« ΠΏΠΎΠ΄Π²Π°Π»Π΅ Β» ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΎ, Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ top: 0 Π½Π° bottom: 0 :
ΠΠ° ΡΡΠΎΠΌ, ΠΏΠΎΠΆΠ°Π»ΡΠΉ, Π²ΡΠ΅.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅
ΠΠΎΠ΄Π²ΠΎΠ΄Ρ ΠΈΡΠΎΠ³ΠΈ
Π Π½ΡΠΆΠ½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΡΠΌΠΎΠΆΠ΅Ρ ΡΠ»ΡΡΡΠΈΡΡ ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΌΠ΅Π½ΡΡΠ°Π΅Ρ Π·Π°Π΄Π΅ΡΠΆΠΊΡ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π΅ ΠΊ Π½ΠΎΠ²ΠΎΠΉ Π·Π°Π΄Π°ΡΠ΅, ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΠΎΠΉ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΡΠ΅Π±ΡΠ΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΎΠ±ΡΠ°ΡΠ½ΠΎ ΠΊ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ.
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΌΠ΅Π½Ρ, Π±Π»ΠΎΠΊΠΈ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ CSS β position:sticky
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π·Π°Π»ΠΈΠΏΠ°ΡΡΡΡ ΡΠ°ΠΏΠΊΡ
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π·Π°Π»ΠΈΠΏΠ°ΡΡΠΈΠΉ ΠΏΠΎΠ΄Π²Π°Π»
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π·Π°Π»ΠΈΠΏΠ°ΡΡΠΈΠΉ footer β Codepen
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Sticky JS
ΠΡΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ Π·Π°Π»ΠΈΠΏΠ°ΡΡΠΈΠΉ Π±Π»ΠΎΠΊ ΠΎΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π»ΡΡ, ΠΊΠΎΠ³Π΄Π° Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°Π΅ΡΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, ΡΠΊΠ°ΠΆΠΈΡΠ΅ Π² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ data-sticky-container
ΠΡΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° Π²ΠΏΠΎΠ»Π½Π΅ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΡΡΡΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ Π½Π° Π·Π°Π»ΠΈΠΏΠ°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ, ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ° ΠΈΠ»ΠΈ Π²ΠΈΠ΄ΠΆΠ΅Ρ Π² ΡΠ°ΠΉΠ΄Π±Π°ΡΠ΅ ΡΠ±ΠΎΠΊΡ. ΠΡΠ»ΠΈ ΡΡΠΎΡ Π²Π°ΡΠΈΠ°Π½Ρ Π½Π΅ ΠΏΠΎΠΌΠΎΠ³, Π½ΠΈΠΆΠ΅ ΠΏΠΎΠΉΠ΄ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΡ, Π² ΠΊΠΎΡΠΎΡΡΡ Π½Π°Π³Π»ΡΠ΄Π½ΠΎ ΠΎΠ±ΡΡΡΠ½ΡΠ΅ΡΡΡ ΠΏΡΠΈΠ½ΡΠΈΠΏ ΠΈ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ ΡΠ°Π±ΠΎΡΡ Π·Π°Π»ΠΈΠΏΠ°Π½ΠΈΡ Ρ Π³ΠΎΡΠΎΠ²ΡΠΌΠΈ ΡΠ΅ΡΠ΅Π½ΠΈΡΠΌΠΈ.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π² ΡΠ°ΠΏΠΊΠ΅
ΠΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ. ΠΡΡ Π±ΡΠ΄Π΅Ρ ΠΎΡΠ½ΠΎΠ²ΡΠ²Π°ΡΡΡΡ Π½Π° ΡΠΎΠΌ, Π³Π΄Π΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΡΠΊΡΠΎΠ»Π» Π½Π° ΡΠ΅ΠΊΡΡΠΈΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π°ΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ
ΠΠΎΡ ΠΈ Π²ΡΡ Π»ΠΎΠ³ΠΈΠΊΠ°.
ΠΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ
HTML Π±ΡΠ΄Π΅Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ±ΠΎΠΉ ΡΡΠΎ-ΡΠΎ Π½Π°Π²ΡΠΎΠ΄Π΅
JavaScript
Π Javascript Π±ΡΠ΄Π΅ΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π½Π°ΡΡ Π»ΠΎΠ³ΠΈΠΊΡ
ΠΡΠ»ΠΈ Π½Π΅ Ρ ΠΎΡΠΈΡΠ΅ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π·Π°Π»ΠΈΠΏΠ°Π½ΠΈΠ΅ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², Π²Π°ΠΌ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡ ΡΠ°ΠΊΠΎΠΉ ΠΊΠΎΠ΄:
Π CSS ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΠΊΠ»Π°ΡΡ, ΠΊΠΎΡΠΎΡΡΠΌ ΡΠΈΠΊΡΠΈΡΡΠ΅ΠΌ ΠΌΠ΅Π½Ρ
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π²ΠΈΠ΄ΠΆΠ΅Ρ Π² ΡΠ°ΠΉΠ΄Π±Π°ΡΠ΅
ΠΠ»Ρ Π±ΠΎΠ»ΡΡΠΈΡ
ΡΡΠ°ΡΠ΅ΠΉ Π΄ΡΠ±Π»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ ΡΡΠ°ΡΡΠΈ Π² ΡΠ°ΠΉΠ΄Π±Π°ΡΠ΅ Π² ΡΠΎΠ»ΠΈ Π²ΠΈΠ΄ΠΆΠ΅ΡΠ° ΠΎΡΠ΅Π½Ρ ΡΠ΄ΠΎΠ±Π΅Π½, Π²ΠΈΠ΄Π½ΠΎ Π²ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ Π² ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠΌ ΡΠΎΡΠΌΠ°ΡΠ΅. Π’Π°ΠΊΠΆΠ΅, ΡΠ°ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ ΡΠ΅ΠΊΠ»Π°ΠΌΡ ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π²ΠΈΠ΄ΠΆΠ΅ΡΡ Ρ ΠΏΠΎΡ
ΠΎΠΆΠΈΠΌΠΈ ΡΡΠ°ΡΡΡΠΌΠΈ ΠΈΠ»ΠΈ ΡΠ΅ΠΌ-ΡΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΌ.
ΠΠΈΠΆΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ², ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π·Π°Π»ΠΈΠΏΠ°ΡΡΠΈΠΉ Π²ΠΈΠ΄ΠΆΠ΅Ρ Π² ΡΠ°ΠΉΠ΄Π±Π°ΡΠ΅ ΡΠ±ΠΎΠΊΡ ΠΎΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΡΠ°ΡΡΠΈ.
Q2W3 Fixed Widget β ΠΏΠ»Π°Π³ΠΈΠ½ WordPress Π΄Π»Ρ ΡΠΈΠΊΡΠ°ΡΠΈΠΈ Π²ΠΈΠ΄ΠΆΠ΅ΡΠ° ΡΠ±ΠΎΠΊΡ
Q2W3 Fixed Widget β ΡΡΠΎ ΠΠΎΡΠ΄ΠΏΡΠ΅ΡΡ-ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π·Π°Π»ΠΈΠΏΠ°ΡΡ Π²ΠΈΠ΄ΠΆΠ΅ΡΠ°ΠΌ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΌ ΡΠ±ΠΎΠΊΡ Π² ΡΠ°ΠΉΠ΄Π±Π°ΡΠ΅.
ΠΠ°ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ
ΠΡ ΠΏΡΠΎΡΡΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΈ Π°ΠΊΡΠΈΠ²ΠΈΡΡΠ΅ΡΠ΅ Π΅Π³ΠΎ. Π’Π΅ΠΏΠ΅ΡΡ Π»ΡΠ±ΠΎΠΉ Π²ΠΈΠ΄ΠΆΠ΅Ρ Π² ΡΠ°ΠΉΠ΄Π±Π°ΡΠ΅ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠ°ΠΊΡΡ Π³Π°Π»ΠΎΡΠΊΡ
Π£ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²ΠΈΠ΄ΠΆΠ΅ΡΠ° ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π·Π°Π»ΠΈΠΏΠ°Π½ΠΈΡ
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π·Π°Π»ΠΈΠΏΠ°ΡΡΠΈΠΉ Π²ΠΈΠ΄ΠΆΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ Π½Π°Π»Π΅Π·Π°Π΅Ρ Π½Π° Π½ΠΈΠ· ΡΠ°ΠΉΡΠ°
ΠΠΈΠΆΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ Π²Π°ΡΠΈΠ°Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π² ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΏΡΠΈΠ½ΡΠΈΠΏ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΈΠ· 1 ΠΏΡΠ½ΠΊΡΠ°.
ΠΠ°Π΄Π°ΡΠ° β Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠ³ΠΎ Π²ΠΈΠ΄ΠΆΠ΅ΡΠ° ΡΠ΄Π΅Π»Π°ΡΡ Π·Π°Π»ΠΈΠΏΠ°Π½ΠΈΠ΅, Π½ΠΎ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π½Π΅ Π½Π°Π»Π΅Π·Π°Π» Π½Π° ΠΏΠΎΠ΄Π²Π°Π» ΡΠ°ΠΉΡΠ°.
ΠΡΠΈΠ½ΡΠΈΠΏ ΠΏΡΠΎΡΡ: ΠΌΡ Π²ΡΡΡΠΈΡΡΠ²Π°Π΅ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ:
ΠΠ°Π»Π΅Π΅, Π½Π° ΡΠΎΠ±ΡΡΠΈΠΈ window.scroll ΠΌΡ ΡΡΠΈΡΠ°Π΅ΠΌ ΡΠ΅ΠΊΡΡΠΈΠ΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ Π²Π΅ΡΡ Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
JavaScript
ΠΠ΅ΡΠ΅Π΄ ΡΠΊΡΠΈΠΏΡΠΎΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Π³ΡΡΠ·ΠΈΡΡ jQuery
ΠΠ΅Π»Π°Π΅ΠΌ Π·Π°Π»ΠΈΠΏΠ°Π½ΠΈΠ΅ Π² ΡΠ°ΠΉΠ΄Π±Π°ΡΠ΅ Π²ΡΡΡΠ½ΡΡ, Π²Π°ΡΠΈΠ°Π½Ρ β2
ΠΡΠΎΡ Π²Π°ΡΠΈΠ°Π½Ρ ΡΡΠ³ΡΠ±ΠΎ ΠΊΠ°ΡΡΠΎΠΌΠ½ΡΠΉ, ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠΌ PHP-ΠΊΠ»Π°ΡΡΠ΅ Kama_Contents, ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠΏΡΠ°Π²Π° Π² Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ΅. ΠΡΠ»ΠΎΠΆΡ ΠΊΠΎΠ΄ ΠΈ Π»ΠΎΠ³ΠΈΠΊΡ, ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡ.
ΠΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΊΠ°
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π°, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΈΠΌΠ΅ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ ΡΡΠ°ΡΡΠΈ. Π’Π°ΠΊΠΆΠ΅, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ jQuery
ΠΠΎΠ΄ HTML
ΠΠ»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π²ΠΎΠ·ΡΠΌΡΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ ΡΡΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ
ΠΠΎΠ΄ Javascript
Π Π·Π°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
ΠΡΠ»ΠΈ Π²Π°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»Π°ΡΡ ΡΡΠ°ΡΡΡ, Π½ΠΎ ΡΡΠΎ-ΡΠΎ Π½Π΅ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ ΠΏΠ΅ΡΠ΅Π΄Π΅Π»Π°ΡΡ ΠΏΠΎΠ΄ ΡΠ²ΠΎΠΈ Π½ΡΠΆΠ΄Ρ, Π½Π΅ ΡΡΠ΅ΡΠ½ΡΠΉΡΠ΅ΡΡ ΡΠΏΡΠ°ΡΠΈΠ²Π°ΡΡ ΠΎΠ± ΡΡΠΎΠΌ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ , Π²ΠΌΠ΅ΡΡΠ΅ Π½Π°ΠΉΠ΄ΡΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅.
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
Π£Π·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ «ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅» ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
CΠΎΠ·Π΄Π°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
Π¨Π°Π³ 1) ΠΠΎΠ±Π°Π²ΠΈΡΡ HTML:
ΠΡΠΈΠΌΠ΅Ρ
ΠΠ°ΠΊΠΎΠΉ-ΡΠΎ ΡΠ΅ΠΊΡΡ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΡΠ΅ΠΊΡΡ.. ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΡΠ΅ΠΊΡΡ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΡΠ΅ΠΊΡΡ..
Π¨Π°Π³ 2) ΠΠΎΠ±Π°Π²ΠΈΡΡ CSS:
ΠΡΠΈΠΌΠ΅Ρ
/* ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ */
.navbar <
overflow: hidden;
background-color: #333;
position: fixed; /* Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π² ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ */
top: 0; /* Π Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π² Π²Π΅ΡΡ
Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ */
width: 100%; /* ΠΠΎΠ»Π½Π°Ρ ΡΠΈΡΠΈΠ½Π° */
>
/* Π‘ΡΡΠ»ΠΊΠΈ Π² ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ */
.navbar a <
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>
/* ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ */
.navbar a:hover <
background: #ddd;
color: black;
>
/* ΠΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ */
.main <
margin-top: 30px; /* ΠΠΎΠ±Π°Π²ΠΈΡΡ Π²Π΅ΡΡ
Π½Π΅Π΅ ΠΏΠΎΠ»Π΅, ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ */
>
Π‘ΠΎΠ·Π΄Π°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π½ΠΈΠΆΠ½Π΅Π΅ ΠΌΠ΅Π½Ρ
Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π½ΠΈΠΆΠ½Π΅Π΅ ΠΌΠ΅Π½Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ position:fixed ΠΈ bottom:0 :
ΠΡΠΈΠΌΠ΅Ρ
/* ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ */
.navbar <
position: fixed; /* Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π² ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ */
bottom: 0; /* Π Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π² Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ */
width: 100%; /* ΠΠΎΠ»Π½Π°Ρ ΡΠΈΡΠΈΠ½Π° */
>
/* ΠΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ */
.main <
margin-bottom: 30px; /* ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² Π½ΠΈΠΆΠ½Π΅Π΅ ΠΏΠΎΠ»Π΅, ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ */
>
Π‘ΠΎΠ²Π΅Ρ: ΠΠ°ΠΉΠ΄ΠΈΡΠ΅ Π½Π° Π½Π°Ρ ΡΡΠ΅Π±Π½ΠΈΠΊ CSS ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΠΏΠ°Π½Π΅Π»ΡΡ .










