21. září bude sraz! Od 18.00 v restauraci Tradice v Praze u Anděla
Autor Zpráva
SirDoxik
Profil
Dobrý den,chtěl jsem si udělat navigaci, s průhledným pozadím, a když bych začal scrollovat, tak by se změnila barva pozadí a textu. V html a css jsem si vytvořil 2 divy a nastylova. Teď bych od vás potřeboval pomoct. Jak zobrazit druhý div při scrollování a první když je uživatel úplně nahoře. Předem děkuji.
lionel messi
Profil
SirDoxik:
Postačí takto?

jsfiddle.net/w1L5w6b9

Som si vedomý, že toto riešenie nie je zrejme úplne optimálne, alternatívou môže byť prehadzovanie tried.
SirDoxik
Profil
Já sem tak šikovnej, a dokážu udělat chybu i v tomhle. :D s javascriptem teprve začínám. moje html
    <div id="toppanel-container">
        <div class="toppanel">
            <div class="logo-black">
            </div>
            <div class="menu">
                <span class="menubutton">
                </span>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Home</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="toppanel-transparent-container">
        <div class="toppanel-transparent">
            <div class="logo-white">
            </div>
            <div class="menu">
                <span class="menubutton">
                </span>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Home</a></li>
                </ul>
            </div>
        </div>
    </div>
a tady je moje css
#toppanel-transparent-container {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    height: 66px;
    padding: 0;
    z-index: 2
}
.toppanel-transparent {
    width: 1180px;
    height: 66px;
    position: relative;
    top: 0;
    left: 0;
    background-color: transparent;
    margin-left: auto;
    margin-right: auto;
}
.logo-white {
    background-image: url("images/logo.png");
    width: 236px;
    height: 23px;
    display: block;
    z-index: 100;
    top: 20px;
    position: relative;
}
#toppanel-container {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #ffffff;
    height: 66px;
    padding: 0;
    z-index: 100;
    display: block;;
    z-index: 100
}
.toppanel {
    width: 1180px;
    height: 66px;
    position: relative;
    top: 0;
    left: 0;
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    z-index: 100
}
.logo-black {
    background-image: url("images/logo-black.png");
    width: 236px;
    height: 23px;
    display: block;
    z-index: 100;
    top: 20px;
    position: relative;
}
omlouvám se že otravuju, ale nepředělal by mi to někdo na moje potřeby prosím?
lionel messi
Profil
SirDoxik:
omlouvám se že otravuju, ale nepředělal by mi to někdo na moje potřeby prosím?
Nepochopil som, ktoré dva divy chceš v závislosti od scrollovania prehadzovať (nikde v CSS nevidím display: none, preto sa pýtam). Chceš meniť iba farbu pozadia jednému divu (ako píšeš v titulku) alebo jeden div zameniť za úplne iný (ako píšeš v [#1])?

Na zmenu farby pozadia a textu pomocou JS nepotrebuješ dva divy, postačí jeden (a výsledný kód bude dokonca aj o čosi kratší).
SirDoxik
Profil
Mám tam 2 divi toppanel-container a toppanel-transparent container a u nich to potřebuju. Potřebuji zaměnit celý div, jelikož se mění i obrázky v něm :)
Keeehi
Profil
SirDoxik:
Obrázek na pozadí je stále jen pozadí. Žádný tag img tam nevidím. Takže se nemusejí zaměňovat.
SirDoxik
Profil
Je tam logo a menu a když dám z průhledného na bílé pozadí, tak se tam logo ztratí

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

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

0