Scrollující reklama

Dooda

(6 hodnocení)

14. 2. 2012 19:53:58

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

14. 2. 2012 19:53:58

https://webtrh.cz/diskuse/scrollujici-reklama/#reply731013

Michal Haták

(1 hodnocení)

14. 2. 2012 20:39:13

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

14. 2. 2012 20:39:13

https://webtrh.cz/diskuse/scrollujici-reklama/#reply731012

Dooda

(6 hodnocení)

14. 2. 2012 22:13:35

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

14. 2. 2012 22:13:35

https://webtrh.cz/diskuse/scrollujici-reklama/#reply731011

(20 hodnocení)

14. 2. 2012 22:25:27

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 :))

14. 2. 2012 22:25:27

https://webtrh.cz/diskuse/scrollujici-reklama/#reply731010

800XE

(8 hodnocení)

15. 2. 2012 01:28:09

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

<!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>

15. 2. 2012 01:28:09

https://webtrh.cz/diskuse/scrollujici-reklama/#reply731009

Dooda

(6 hodnocení)

15. 2. 2012 08:29:42

Díky za pomoc

15. 2. 2012 08:29:42

https://webtrh.cz/diskuse/scrollujici-reklama/#reply731008

Pro odpověď se přihlašte.

Přihlásit