| Autor | Zpráva | ||
|---|---|---|---|
| Mlocik97 Profil * |
#1 · Zasláno: 26. 1. 2017, 18:33:05
Zdravím, viem ako ukotviť menu keď pred ním už nič iné nieje position: fixed a Top:0) avšak neviem ako to ruboťi keď mám pred ním ešte niečo, napríklad mám hlavičku, a chcem aby menu bolo bod hlavičkou, teda 150px od horného okraja s tým že sa pri scrollovaní presunie k hornému okraju a potom sa tam ukotví.
|
||
| Trejpa Profil |
#2 · Zasláno: 26. 1. 2017, 19:42:23
|
||
| Keeehi Profil |
#3 · Zasláno: 26. 1. 2017, 20:59:42
Nebo nezávisle na výšce obsahu nad ním.
Fixní menu při rolování |
||
| Mlocik97 Profil * |
#4 · Zasláno: 26. 1. 2017, 21:46:07
Ďakuj Vám.
|
||
| Tomášeek Profil |
Trejpa:
Ač chybu nevidím a konzole nic nehlásí, tvůj kód mi nefunguje (nezafunguje podmínka a nezmění se styl elementu) v Safari. Příčinu hledat nechci, jen upozorňuji, pokud by se tím chtěl někdo zabývat. V Chrome OK. Doplním, že proměnná posun nabývá správných hodnot (tedy 150+), ale nepřiřazuje se styl. Asi mi (prohlížeči) vadí vložení stringu s více hodnotami, namísto klasického přístupu skrze objekt(?).
element.style.display = 'fixed'; element.style.top = 0; // analogicky zpet Někdo (Chamurapi) možná bude vědět více i z historie, případně verzí, kde a proč to (ne)funguje. |
||
| Trejpa Profil |
#6 · Zasláno: 27. 1. 2017, 11:20:28
|
||
| Tomášeek Profil |
#7 · Zasláno: 27. 1. 2017, 11:25:56
Kdyby se někomu chtělo vysvětlit/najít, proč nefungoval původní Trejpův zápis, rád se poučím (přiznávám ale, že na dohledávání a listování dokumentací nemám sám čas). Docela mě to zajímá, ale pokud se nikomu chtít nebude, pochopím :-)
|
||
| pcmanik Profil |
Tomášeek:
Style nieje určený na priraďovanie viacerých hodnôt naraz. Na to slúži cssText Nastavovanie viacerých vlastností cez style spôsobí zbytočný redraw v prehliadači. Čomu by sa mal cssText alebo zmena CSS triedy vyhnúť. Naviac písať CSS priamo do Javascriptu nieje z dôvodu udržiavania kódu dobrý nápad. Lepšie je zmeniť triedu. |
||
| Tomášeek Profil |
#9 · Zasláno: 27. 1. 2017, 16:09:21
pcmanik:
O best-practices (měnit třídu namísto stylů) se tu bavit nechci. Na to jsem se neptal. O užití (a existenci) .cssText se bavit rovněž nechci.
Můj dotaz byl (koukám, že jsem to napsal špatně, správně mělo být), proč někde Trejpův zápis fungoval? Konkrétně v Chromu (a možná i jinde). |
||
| Keeehi Profil |
Tomášeek:
„proč někde Trejpův zápis fungoval? Konkrétně v Chromu (a možná i jinde).“ To asi proto, že to tak chrome implementoval. HTMLElement.style vrací objekt třídy CSSStyleDeclaration. A když do HTMLElement.style přiřazuješ, chtělo by to zase přiřezovat objekt třídy CSSStyleDeclaration a ne obyčejný string. Předpokládal bych, že když to v chrome funguje, tak si ten string nejdříve převede na objekt. |
||
|
Časová prodleva: 4 měsíce
|
|||
| Mlocik97 Profil |
Trejpa:
ahoj, upravil som si tvoj kód, teraz mám: function anchor() {
var shift = (window.pageYOffset || document.documentElement.scrollTop) - (document.documentElement.clientTop || 0);
if (shift > 100) {
$('<link>').appendTo('head').attr({
rel: 'stylesheet',
href: 'anchor-style.css'
});
}
else {
$('link').remove('[href="anchor-style.css"]');
}
}
window.onscroll = anchor;funguje mi to presne tak ako chcem s jedinou výnimkou, tou je že pri skrolovaní ak je splnená podmienka ten link tam pridá nielen jednou ale viackrát, čím viac skrolujem tým viac krát to tam je, ako to omedziť aby to pridalo iba jednou? s tým ale že keď prestane platiť podmienka tak sa to odstráni a následne ak zase začne platiť podmienka aby znova to tam ale iba jednou pridalo? (p.s. jinak skúšal som to s ".one()" ale nefungovalo to. |
||
| Mlocik97 Profil |
Mlocik97:
skúšal som: function anchor() {
var state;
var shift = (window.pageYOffset || document.documentElement.scrollTop) - (document.documentElement.clientTop || 0);
if (shift > 100 && state != 1) {
$('<link>').appendTo('head').attr({
rel: 'stylesheet',
href: 'anchor-style.css'
});
state = 1;
}
else if (state != 2 && shift <=100) {
$('link').remove('[href="anchor-style.css"]');
state = 2;
}
}
window.onscroll = anchor; |
||
| Trejpa Profil |
#13 · Zasláno: 15. 5. 2017, 16:29:41
|
||
| Mlocik97 Profil |
Trejpa:
ďakujem, ale toto nechci.. a to z dôvodu toho že chcem takto meniť omnoho viac elementov, a aj kvôli tomu že ten CSS následne bude použitý na viac "vecí". proste potrebujem aby boli tie CSS v externom súbore... jinak ma napadla aj druhá možnosť. A to načítať je raz a JS iba ich zakázať alebo povoliť. function PovolStyl (Povol, Zakaz) {
document.styleSheets [Zakaz].disabled = true;
document.styleSheets [Povol].disabled = false;
} |
||
| Chamurappi Profil |
#15 · Zasláno: 15. 5. 2017, 16:41:23
Reaguji na Mlocika97:
Proč děláš takovou šílenost, jako je načítání dalšího souboru při rolování? „následne ak zase začne platiť podmienka aby znova to tam ale iba jednou pridalo“ To se jako má stahovat jeden soubor pořád kolem dokola? Takové zvěrstvo jsem ještě neviděl. Koukám, že už mě tu předběhl Trejpa, souhlasím s jeho doporučením. Třída řeší naprosto všechno, jednou změnou třídy můžeš klidně změnit vzhled celé stránky… „že keď prestane platiť podmienka tak sa to odstráni“ Nejspíš ti to nefunguje, protože odebrání <link>u neodebere stylopis <link>em do DOMu přidaný. Je to podobné, jako bys chtěl odebrat z DOMu <script> s předpokladem, že se efekt způsobený tím skriptem odvolá. U skriptů to tak fungovat nemůže, u stylů by teoreticky mohlo… ale moc bych si od toho nesliboval.
Také ti to může nefungovat z toho důvodu, že atribut href možná není roven "anchor-style.css", ale absolutní adrese.
|
||
| Trejpa Profil |
#16 · Zasláno: 15. 5. 2017, 16:42:59
Mlocik97:
Není problém místo na menu měnit className třeba elementu BODY a přes třídu doplnit nebo změnit vlastnosti čemukoliv na stránce. Načítání (a odpojování) dalšího připojeného souboru je zbytečné. Bude-li mít styl využití jinde, připoj ho trvale a adresuj jeho vlastnosti zase přes třídu. |
||
| Mlocik97 Profil |
Chamurappi:
to removovanie mi funguje úplne v pohode a správne.... Trejpa: a čo myslíš ten "môj" druhý spôsob? |
||
| Tomášeek Profil |
Mlocik97:
Proč to řešíš zase, když už jsi to jednou řešil a údajně vyřešil? (NE)funkčný kód |
||
| Mlocik97 Profil |
Tomášeek:
tak si to prečti znova, a pochopil by si že som tam riešil takmer úplne inú vec, a to že proč nejde ten kód, nikoliv že ako lepšie napísať kód tak aby ho tam nepridávalo viac krát a nemuselo ho načitávať stále dookola. |
||
| Trejpa Profil |
Mlocik97:
„a čo myslíš ten "môj" druhý spôsob?“ Ano, ten funguje. document.styleSheets[1].disabled = true;
/* [1] znamená druhý připojený styl */
function pozice() {
var posun = (window.pageYOffset || document.documentElement.scrollTop) - (document.documentElement.clientTop || 0);
if (posun > 150)
{
document.styleSheets[1].disabled = false;
}
else
{
document.styleSheets[1].disabled = true;
}
}
window.onscroll = pozice;Což neznamená, že řešení je vhodné. Rozhodně bych neměnil jeden styl za druhý kus za kus, ale když už, tak druhým doplnil první. Naposledy jsem tento způsob viděl někdy před patnácti lety, když se jím na základě podmínky verze prohlížeče trvale připojoval druhý styl opravující zobrazovací chyby v prohlížečích IE 5 a IE 5.5. Pak totéž elegantněji vyřešily podmíněné komentáře. EDIT: V kódu smazán nepotřebný řádek, viz připomínku [#21]. |
||
| Mlocik97 Profil |
Trejpa:
ten var element = document.getElementById('menu');tam už nemusí byť, když selektor už budem mať v tom CSS súbore? ďakujem ti inak :) |
||
| Trejpa Profil |
#22 · Zasláno: 15. 5. 2017, 21:51:20
Mlocik97:
„tam už nemusí byť, když selektor už budem mať v tom CSS súbore?“ Ne, už není potřeba. |
||
| Mlocik97 Profil |
#23 · Zasláno: 17. 5. 2017, 22:27:21
Trejpa:
ešte som nakoniec potreboval maličkú úpravu, [2] bol druhý stylesheet. totiž ono to nebere len stylesheet ale aj icon (favicon.ico), a ten som mal akoby nultý. |
||
|
Časová prodleva: 7 let
|
|||
0