Avatar
sablatura.david:

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:

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
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
sablatura.david:

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:

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

Nahoru Odpovědět 23.1.2014 0:52
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Honza Bittner
sablatura.david:

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
Nahoru Odpovědět 23.1.2014 10:57
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
Drahomír Hanák:

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  +1 23.1.2014 11:04
Avatar
Odpovídá na Drahomír Hanák
sablatura.david:

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
Tým ITnetwork
Avatar
Odpovídá na sablatura.david
Drahomír Hanák:

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:

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
Tým ITnetwork
Avatar
Odpovídá na sablatura.david
Drahomír Hanák:

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  +1 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.