NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Javascript dva fix bannery při různém odscrolování - nefunguje :(

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
sablatura.david
Člen
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 Hartinger
Vlastník
Avatar
Odpovídá na sablatura.david
David Hartinger: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
New kid back on the block with a R.I.P
Avatar
sablatura.david
Člen
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
Tvůrce
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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
sablatura.david
Člen
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
Tvůrce
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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Drahomír Hanák
Tvůrce
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
sablatura.david
Člen
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
Tvůrce
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
sablatura.david
Člen
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
Tvůrce
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.