Autor | Zpráva | ||
---|---|---|---|
doominick Profil * |
#1 · Zasláno: 14. 6. 2010, 20:51:06
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 * |
#2 · Zasláno: 14. 6. 2010, 21:39:52
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 * |
#3 · Zasláno: 14. 6. 2010, 21:47:34
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 * |
#4 · Zasláno: 14. 6. 2010, 23:42:15
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 * |
#5 · Zasláno: 15. 6. 2010, 14:13:28
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 |
||
Časová prodleva: 14 let
|
0