Diskuze: scroll stránky s anchor a fixed menu
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Tvůrce
Zobrazeno 10 zpráv z 10.
//= Settings::TRACKING_CODE_B ?> //= Settings::TRACKING_CODE ?>
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
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="#...")
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
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.
me ta lista na ie9 odjede, otazka co to udela s tim tvym scriptem, to vyzkousim zitra
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%
Podívej se sem http://tests.drahak.eu/ Nahrál jsem tam ten tvůj upravený kód a funguje mi od IE7
Zobrazeno 10 zpráv z 10.