Avatar
berry309
Redaktor
Avatar
berry309:

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
HTML a CSS kodér - www.josefberan.eu
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na berry309
Drahomír Hanák:

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
Redaktor
Avatar
berry309:

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 12.1.2013 0:35
Nahoru Odpovědět 12.1.2013 0:32
HTML a CSS kodér - www.josefberan.eu
Avatar
berry309
Redaktor
Avatar
Odpovídá na Drahomír Hanák
berry309:

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
HTML a CSS kodér - www.josefberan.eu
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na berry309
Drahomír Hanák:

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
Redaktor
Avatar
Odpovídá na Drahomír Hanák
berry309:

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

Nahoru Odpovědět  +1 12.1.2013 0:42
HTML a CSS kodér - www.josefberan.eu
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na berry309
Drahomír Hanák:

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 12.1.2013 0:46
 
Nahoru Odpovědět 12.1.2013 0:46
Avatar
berry309
Redaktor
Avatar
Odpovídá na Drahomír Hanák
berry309:

Diky, vecer to zkusim a dam vedet.

Nahoru Odpovědět 12.1.2013 19:53
HTML a CSS kodér - www.josefberan.eu
Avatar
berry309
Redaktor
Avatar
Nahoru Odpovědět 12.1.2013 20:06
HTML a CSS kodér - www.josefberan.eu
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na berry309
Drahomír Hanák:

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.