Pouze tento týden sleva až 80% na e-learning týkající se Kotlinu
Využij akce až 80% zdarma při nákupu e-learningu. Více informací .
Kotlin week
Avatar
sablatura.david:21.1.2014 1:00

Zdravím,
potřeboval bych poradit už druhý den se trápím s JS a nevím si vůbec rady mám stránku na které je nalevo i napravo banner oba ale v jiné výšce a potřebuji aby každý se postupně zafixoval při scrolování dolů. Všude jsem našel spoustu návodů jak tohle vyřešit ale jen s jedním bannerem ale nikde ne se dvěma.

po radách zkušenějších jsem vytvořil tento script

window.addEven­tListener ('scroll', mybanner , false );

function mybanner () {
var banner = document.getE­lemetById('#ban­ner');
if (window.scrollY > 270) {
banner.style.top = "10px";
banner.style.po­sition = "fixed";
} else {
banner.style.po­sition = "relative";
banner.style.top ="auto";
}
}

window.addEven­tListener ('scroll', myadsense , false );

function myadsense () {
var adsense = document.getE­lemetById('#ad­sense');
if (window.scrollY > 630) {
adsense.style.top = "10px";
adsense.style­.position = "fixed";
} else {
adsense.style­.position = "relative";
adsense.style.top ="auto";
}
}

Ale i ten je nefunkční jediné co mi zatím funguje je:

window.onscroll = function statbanner () {
var banner = document.getE­lementById('ban­ner');
if (window.scrollY > 270) {
banner.style.top = '10px';
banner.style.po­sition = 'fixed';
} else {
banner.style.po­sition = 'relative';
banner.style.top = 'auto';
}
};

Ale vždy jen pro jeden banner oba není možné rozchodit. Našel by se tu někdo kdo by mi s tím poradil?

Díky moc všem

 
Odpovědět
21.1.2014 1:00
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na sablatura.david
David Čápka:21.1.2014 16:28

Na to tady psal tutoriál HoBi, stačilo by si ho najít - http://www.itnetwork.cz/…nu-a-sidebar

Nahoru Odpovědět
21.1.2014 16:28
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
sablatura.david:21.1.2014 20:16

Díky tomuto článku jsem se dostal i sem na tento portál ale nepomohl mi s tím co potřebuji. Proto jsem napsal sem na forum

 
Nahoru Odpovědět
21.1.2014 20:16
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na sablatura.david
Honza Bittner:23.1.2014 0:52

Musíš to mírně upravit - aby to bralo - porovnávalo - každého zvlášť.

Nahoru Odpovědět
23.1.2014 0:52
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Odpovídá na Honza Bittner
sablatura.david:23.1.2014 10:55

To je mi jasné ale jak to mám udělat?

 
Nahoru Odpovědět
23.1.2014 10:55
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na sablatura.david
Honza Bittner:23.1.2014 10:57

zkus třeba .each()

Nahoru Odpovědět
23.1.2014 10:57
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Drahomír Hanák
Redaktor
Avatar
Odpovídá na Honza Bittner
Drahomír Hanák:23.1.2014 11:04

each je jQuery metoda (pokud má jQuery je to rozhodně správně). V JavaScritu (ES5) má Array metodu forEach (jen čistě typ Array), která je tomu podobná, ale funkce pro práci s DOM vracejí většinou NodeList, která ji nemá.

Editováno 23.1.2014 11:04
 
Nahoru Odpovědět
23.1.2014 11:04
Avatar
Odpovídá na Drahomír Hanák
sablatura.david:23.1.2014 16:51

Teď nechápu co máš na mysli jestli to napsat v JQuery nebo v něčem jiném?

 
Nahoru Odpovědět
23.1.2014 16:51
Avatar
Drahomír Hanák
Redaktor
Avatar
Odpovídá na sablatura.david
Drahomír Hanák:23.1.2014 18:38

Bez jQuery zkus něco takového:

(function() {
    var FIXED_CLASS = 'fixed';
    var banners = document.querySelectorAll('.banner');
    var affixTop = function(elements, top) {
        var scrollTop = document.body.scrollTop;
        for (var i = 0; i < elements.length; i++) {
            var isFixed = elements[i].className.match(FIXED_CLASS);
            if (scrollTop > top && !isFixed) {
                elements[i].className += ' ' + FIXED_CLASS;
            } else if(scrollTop < top && isFixed ) {
                elements[i].className = elements[i].className.replace(FIXED_CLASS, '');
            }
        }
    };

    window.addEventListener('scroll', function() {
        affixTop(banners, 200);
    }, false);
})();
 
Nahoru Odpovědět
23.1.2014 18:38
Avatar
Odpovídá na Drahomír Hanák
sablatura.david:23.1.2014 22:00

Tak jsem to zkusil nasadit bohužel bez úspěchu (po nasazení to přestalo fungovat) :(

 
Nahoru Odpovědět
23.1.2014 22:00
Avatar
Drahomír Hanák
Redaktor
Avatar
Odpovídá na sablatura.david
Drahomír Hanák:23.1.2014 22:16

Ten můj skript přidává CSS třídu "fixed" elementům ".banners", pokud uživatel scrolluje víc než o 200px od horního okraje webu. Stačí správně nastylovat tu CSS třídu.

 
Nahoru Odpovědět
23.1.2014 22:16
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 11 zpráv z 11.