Autor Zpráva
Mlocik97
Profil *
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
Mlocik97:
Třeba skriptem reagujícím na posun stránky.

příklad - zdroj
Keeehi
Profil
Nebo nezávisle na výšce obsahu nad ním.
Fixní menu při rolování
Mlocik97
Profil *
Ď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
Tomášeek:
Máš pravdu, v Internet Exploreru a Edge můj kód nefungoval a jednou z příčin bylo přiřazování stylů. Opraveno, otestováno v různých prohlížečích.

příklad, zdroj
Tomášeek
Profil
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
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.
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;
neúspešne
Trejpa
Profil
Mlocik97:
Co je to za blbost, podle odskrolování načítat další připojené styly? Měň nejlépe třídu (nebo samotnou vlastnost).

příklad - zdroj
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
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
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
Mlocik97:
tam už nemusí byť, když selektor už budem mať v tom CSS súbore?
Ne, už není potřeba.
Mlocik97
Profil
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ý.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: