Scrollující reklama

**Dooda** · 14.02.2012 19:53

Mohl by mi prosím někdo poradit jak udělat scrollující reklamu jako na http://9gag.com v sidebaru?

Děkuji za pomoc...

**Twista** · 14.02.2012 20:39

na 9gagu to mas tak, ze pokud si na urcite souradnici(window.pageYOffset ?) prida se elementu s reklamou position: fixed :)

**Dooda** · 14.02.2012 22:13

nemáš nějaký příklad v kodu? nějak nevím jak to udělat furt..

**Aleš Jiříček** · 14.02.2012 22:25

najdi si jak v javascriptu menit css atributy, najdi si jak zjistit kde se zrovna nachazi uzivatel (jak moc ma odscrollovano) (window.pageYOffset ?) a jen to slep jendoduchou podminkou - kdyz prekroci nakou hranici smerem dolu, nastavit position na fixed, kdyz smerem nahoru, nastaviot na relative nebo ty vlastnost uplne odebrat... Pokud nejsi programator, doufej ze se najde nekdo kdo nad JS nezlomil hul, protoze ja uz delam jen v jQuery a cisty JS se mi uz ti tu lepit nechce :))

**800XE** · 15.02.2012 01:28

Tak v čistém JS bych to taky nelepil, v jQuery je to na devět řádků:

Kód:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style>
            body {
                margin: 0;
            }
            
            #page {
                position: relative;
                margin: 0 auto;
                width: 1000px;
            }
            
            #page,
            #page .content {
                height: 2000px;
            }
            
            #page .content {
                float: left;
                width: 800px;
                background: #cccccc;
            }
            
            #page .side {
                float: right;
                width: 200px;
                height: 400px;
                background: #aaaaaa;
            }
            
            #page .side.fixed {
                position: fixed;
                margin-left: 800px;
            }
        </style>
        <script src="http://code.jquery.com/jquery-1.7.2b1.js"></script>
        <script>
            $(function() {
                var
                    $side = $('#page .side'),
                    bottom = $side.offset().top + $side.outerHeight(),
                    $window = $(window);
                $window.on('scroll', function() {
                    $side.toggleClass('fixed', $window.scrollTop() > bottom);
                });
            });
        </script>
    </head>
    <body>
        <div id="page">
            <div class="content"></div>
            <div class="side"></div>
        </div>
    </body>
</html>

**Dooda** · 15.02.2012 08:29

Díky za pomoc

Scrollující reklama

Nástroje témat