Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
berry309
Tvůrce
Avatar
berry309:11.1.2013 23:55

Tak jsem se pokusil dat dohromady nejakou tu stranku co scrolluje a ma fixed menu. Podle ruznych navodu mi to funguje z casti. a pokazde jinak v ruznych prohlizecich. Davam odkaz na stazeni celeho souboru. Jinak zkousel jsem vsechno mozne takze to neni nejuhlednejsi.

http://www.uloz.to/…a-anchor-zip

diky za kazdou radu a nasmerovani spravnym smerem.

 
Odpovědět
11.1.2013 23:55
Avatar
Drahomír Hanák
Tvůrce
Avatar
Odpovídá na berry309
Drahomír Hanák:12.1.2013 0:27

Tenhle JS skript ti odscrolluje stránku na danou kotvu (element s id="název_kotvy") tak, že bude kotva nahoře okna prohlížeče. Bude tak z části překrytý tou lištou, protože je umístěna absolutně (resp. fixovaná). V JavaScriptu můžeš od toho offsetu odečítat výšku menu, aby se stránka scrollovala o něco výš a tím pádem aby menu nepřekrývalo obsah, na který najíždí. Dovolil jsem si trochu upravit ten JS:

(function( $ ) {

        $(function() {

                // Elementy HTML a BODY
                var body = $('body,html');
                // Element menu
                var menu = $('#lista');

                // Všechny odkazy, kterým atribut href začíná znakem #
                $('a[href^="#"]').click(function(event) {
                        // Element, kam odkazuje kotva
                        var element = $(this.hash);
                        // Pokud neexistuje, neprovedeme nic
                        if (!element.length) {
                                return false;
                        }

                        // Zastavíme defaultní operaci - přesměrování na kotvu
                        event.preventDefault();
                        // Scrollujeme stránku na daný element
                        body.animate({
                                scrollTop: element.offset().top-menu.height()
                        }, 500);
                });

        });

})( jQuery );

S tímhle skriptem nemusíš mít u odkazů class="scroll" Vybere si totiž všechny odkazy na stránce, které odkazují na kotvy (resp. href="#...")

 
Nahoru Odpovědět
12.1.2013 0:27
Avatar
berry309
Tvůrce
Avatar
berry309:12.1.2013 0:32

super, diky, zitra vyzkousim

jeste mi nefunguje to fixed u ie, nevim jak starsi verze, ale ie 9 ne, ostatni normalni prohlizece ok

ted jsu spat tak zitra poladim to js

Editováno
 
Nahoru Odpovědět
12.1.2013 0:32
Avatar
berry309
Tvůrce
Avatar
Odpovídá na Drahomír Hanák
berry309:12.1.2013 0:35

super, diky, zitra vyzkousim

jeste mi nefunguje to fixed u ie, nevim jak starsi verze, ale ie 9 ne, ostatni normalni prohlizece ok

ted jsu spat tak zitra poladim to js

Editováno Dnes 0:34

 
Nahoru Odpovědět
12.1.2013 0:35
Avatar
Drahomír Hanák
Tvůrce
Avatar
Odpovídá na berry309
Drahomír Hanák:12.1.2013 0:41

Teď nevím, co myslíš. Ta zafixovaná lišta s odkazy mi jde od IE7 až do IE9. Neumí ji až IE6 a to nemusíš vůbec řešit.

 
Nahoru Odpovědět
12.1.2013 0:41
Avatar
berry309
Tvůrce
Avatar
Odpovídá na Drahomír Hanák
berry309:12.1.2013 0:42

me ta lista na ie9 odjede, otazka co to udela s tim tvym scriptem, to vyzkousim zitra ;)

 
Nahoru Odpovědět
12.1.2013 0:42
Avatar
Drahomír Hanák
Tvůrce
Avatar
Odpovídá na berry309
Drahomír Hanák:12.1.2013 0:46

Jo já vlastně předělal i CSS:

* {
        margin: 0;
        padding: 0;
}

body {
        background-color: #FFFFFF;
        color: #101010;
        text-align: center;
        font: 15px Verdana, Arial, Helvetica, sans-serif;
}

#wrapper {
        width: 900px;
        margin: 0 auto;
}

#page {
        text-align: left;
}

#neviditelny  {
        height: 40px;
}

p {
        margin: 0 0 18px 0;
        line-height: 1.8;
}

#lista {
        top: 0;
        position: fixed;
        background-color: #DDD;
        width: 100%;
        line-height: 40px;
        border: 1px solid gray;
        border-bottom: 0;
}

Odendal jsem to height: 100%

Editováno
 
Nahoru Odpovědět
12.1.2013 0:46
Avatar
berry309
Tvůrce
Avatar
Odpovídá na Drahomír Hanák
berry309:12.1.2013 19:53

Diky, vecer to zkusim a dam vedet.

 
Nahoru Odpovědět
12.1.2013 19:53
Avatar
berry309
Tvůrce
Avatar
Odpovídá na Drahomír Hanák
berry309:12.1.2013 20:06

v ie to stale nefunguje

 
Nahoru Odpovědět
12.1.2013 20:06
Avatar
Drahomír Hanák
Tvůrce
Avatar
Odpovídá na berry309
Drahomír Hanák:12.1.2013 20:46

Podívej se sem http://tests.drahak.eu/ Nahrál jsem tam ten tvůj upravený kód a funguje mi od IE7 :)

 
Nahoru Odpovědět
12.1.2013 20:46
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 10 zpráv z 10.