Es gribu, lai navigācijas josla tiktu piestiprināta augšpusē, kad es to ritinu, bet tas nedarbojas, un man nav ne jausmas, kāpēc. Ja varat, lūdzu, palīdzēt, šeit ir mans HTML un CSS kods:
.:
.nav-selections {
text-transform: uppercase;
letter-spacing: 5px;
font: 18px "lato",sans-serif;
display: inline-block;
text-decoration: none;
color: white;
padding: 18px;
float: right;
margin-left: 50px;
transition: 1.5s;
}
.nav-selections:hover{
transition: 1.5s;
color: black;
}
ul {
background-color: #B79b58;
overflow: auto;
}
li {
list-style-type: none;
}
<nav style="position: sticky; position: -webkit-sticky;">
<ul align="left">
<li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
<li><a href="#/about" class="nav-selections">About</a></li>
<li><a href="#/products" class="nav-selections">Products</a></li>
<li><a href="#" class="nav-selections">Home</a></li>
</ul>
</nav>
Pārbaudiet, vai priekšgājējam elementam ir iestatīta pārplūšana (piemēram, overflow:hidden
); mēģiniet to pārslēgt. Iespējams, jums nāksies pakāpties DOM kokā augstāk, nekā gaidījāt =).
Tas var ietekmēt jūsu position:sticky
uz pēcnācēja elementa.
Sticky pozicionēšana ir relatīvās un fiksētās pozicionēšanas hibrīds. Elements tiek uzskatīts par relatīvi pozicionētu, līdz tas pārsniedz noteiktu slieksni, un tad tas tiek uzskatīts par fiksēti pozicionētu.
...
Lai līmējošā pozicionēšana darbotos, kā paredzēts, jānorāda slieksnis ar vismaz vienu notop
,right
,bottom
vaileft
. Pretējā gadījumā tas neatšķirsies no relatīvās pozicionēšanas. [avots: MDN]]
Tātad jūsu piemērā jums ir jādefinē pozīcija, kurā galu galā tai ir jāpaliek, izmantojot īpašību top
.
html, body {
height: 200%;
}
nav {
position: sticky;
position: -webkit-sticky;
top: 0; /* required */
}
.nav-selections {
text-transform: uppercase;
letter-spacing: 5px;
font: 18px "lato", sans-serif;
display: inline-block;
text-decoration: none;
color: white;
padding: 18px;
float: right;
margin-left: 50px;
transition: 1.5s;
}
.nav-selections:hover {
transition: 1.5s;
color: black;
}
ul {
background-color: #B79b58;
overflow: auto;
}
li {
list-style-type: none;
}
<nav>
<ul align="left">
<li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
<li><a href="#/about" class="nav-selections">About</a></li>
<li><a href="#/products" class="nav-selections">Products</a></li>
<li><a href="#" class="nav-selections">Home</a></li>
</ul>
</nav>
no mana komentāra:
position:sticky
nepieciešams koordonāts, lai tel, kur pielīmēt
nav {
position: sticky;
top: 0;
}
.nav-selections {
text-transform: uppercase;
letter-spacing: 5px;
font: 18px "lato", sans-serif;
display: inline-block;
text-decoration: none;
color: white;
padding: 18px;
float: right;
margin-left: 50px;
transition: 1.5s;
}
.nav-selections:hover {
transition: 1.5s;
color: black;
}
ul {
background-color: #B79b58;
overflow: auto;
}
li {
list-style-type: none;
}
body {
height: 200vh;
}
<nav>
<ul align="left">
<li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
<li><a href="#/about" class="nav-selections">About</a></li>
<li><a href="#/products" class="nav-selections">Products</a></li>
<li><a href="#" class="nav-selections">Home</a></li>
</ul>
</nav>
Ir polifills, ko izmantot citām pārlūkprogrammām, izņemot FF un Chrome . Tie ir eksperimentāli noteikumi, kurus jebkurā laikā var ieviest vai neievietot pārlūkprogrammās. Chrome to pievienoja pirms pāris gadiem un pēc tam atteicās no tā, šķiet, ka tas ir atgriezies ... bet cik ilgi ?
Tuvākais būtu position:relative + coordonates atjaunināts ritināšanas laikā, kad sasniegts lipīgais punkts, ja vēlaties to pārvērst javascript skriptu