Autor Zpráva
doominick
Profil *
Viděl jsem na nějaké stránce kontejner s nějakým textem stylovaný jako position:fixed který se ovšem při rolování zastavil o jiný objekt umístěný pod ním.
Teď jsem chtěl použít něco podobného ale zaboha si nemůžu vzpomenout kde něco takového bylo.
A bohužel ani nevím jak bych něco takového realizoval, jestli je na to nějaký css zápis, jestli se fixed pohyboval jen uvnitř nějakého kontejneru, nebo jestli v tom byl zapojený i javascript.
Nedokázal by někdo něco takového, nebo nevíte o nějaké stránce kde by tohle bylo k vidění?
doominick
Profil *
něco takového jako zde: http://www.findmebyip.com/litmus tady je to sice v opačném pořadí ale systém bude stejný...
zde se při scrollování pod lištu s textem této liště jednoduše změní třída na třídu s position:fixed, změnu třídy provádí pravděpodobně javascript ale nemůžu se na něj dostat
tayger
Profil *
Tak zde je použitá javascriptová knihovna Dojo, změna třídy je hned nahoře v prvním scriptu. Předpokládám, že tam je ten iframe a je pozicován absolutně nahoru vzhledem k oknu prohlížeče. Změna třídy zřejmě změní css vlastnost display. Do hloubky jsem to ale nezkoumal.
doominick
Profil *
Změnou třídy se změní všechno co je potřeba pro přenesení divu z position:relative na position:fixed, tam je to myslím celkem pochopitelné, ale tu třídu tam přidá Prototype, čekal jsem že to bude něco jednodužšího... třeba něco takového umí j jQuery, bylo by divné mít na webu jak jQuery tak i Protopype, to už by moc svižný nebyl.
doominick
Profil *
sestrojil jsem to nakonec s pomocí jQuery.
top a bottom můžu nastavit číslem natvrdo nebo je načíst z již existujících objektů viz příklad:
		var top = $('#menu').offset().top - parseFloat($('#menu').css('margin-top').replace(/auto/, 0));
		var bottom = $('#clanky').offset().top - parseFloat($('#menu').css('margin-top').replace(/auto/, 0));
		$(window).scroll(function (event) {
			var y = $(this).scrollTop();
			if ((y >= top) && (y < bottom)) {
				$('#menu').css('position','fixed');
				$('#menu').css('top','0');
			} else {
				if(y < bottom){
					$('#menu').css('position','absolute');
					$('#menu').css('top',top+'px');
				} else {
					$('#menu').css('position','absolute');
					$('#menu').css('top',bottom+'px');
				}
			}
		});

celé je to ale takové líné, pořád tomu něco scháhí, ten příklad který se snažím napodobit fungoval spolehlivě a rychle, nerozumím tomu, tam muselo jít jen o css

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0