| Autor | Zpráva | ||
|---|---|---|---|
| Ťunťa Profil * |
#1 · Zasláno: 7. 3. 2011, 10:56:49
Dobrý den,
odpověď na tuto otázku jsem hledal jsem všude na foru, bohužel bezúspěšně. Zajímalo by mne, zda je možné pomocí css, nějak vymezit hranice do kterých se element s position fixed pohybuje. Konkrétně mám menu, které je umístěno přibližně v polovině stránky a má nastaven position fixed (pro nepodporující prohlížeče js ekvivalent). Tedy když prohlížející roluje, menu se pohybuje s ním. Nícméně já chci aby se menu začalo pohybovat až ve chvíli kdy bude na horním okraji okna prohlížeče. A při vyscrolování na začátek stránky aby opět zůstalo v polovině a nenabourávalo design stránek. Napadlo mě řešení javascriptem které by při každém scrollování kontrolovalo pozici menu a pokud by byla menší než udaná hodnota (tam kde se má menu zastavit) odebrala by se vlastnost position fixed, ale přijde mi to příliš náročné. živá ukázka je zde |
||
| panther Profil |
#2 · Zasláno: 7. 3. 2011, 12:07:22
Ťunťa:
jde to jen JavaScriptem, samotné CSS na tohle nestačí. |
||
| 1Pupik1989 Profil |
#3 · Zasláno: 7. 3. 2011, 13:43:09
Já bych asi volil position: absolute, nebo ho normálně nechal i sestředem, aby scrolloval a při position.top třeba 10, by se hodnota position změnila na fixed. Každopdáně jak píše panther, bude to javascriptová záležitost. Samozřejmě tam bude určitě i opak, aby se menu nastavilo zpátky. Mám pravdu?
|
||
| Ťunťa Profil * |
#4 · Zasláno: 7. 3. 2011, 13:45:18
Máš. Ale přijde mi hloupé tam cpát javascript který se furt bude kontrolovat, když už je na světě ten position fixed :-)
|
||
| 1Pupik1989 Profil |
#5 · Zasláno: 7. 3. 2011, 13:49:12
Ten tam taky bude, ale pokud má to menu rolovat se stránkou až nahoru, tak to s fixed nepůjde, jelikož to menu zůstane na místě. Navíc u tohohle ten javascript moc nesežere :)
|
||
| Ťunťa Profil * |
#6 · Zasláno: 7. 3. 2011, 15:55:09
Jj, jen jsem si říkal jestli tam třeba nejde dát nějaký div o který by se to menu "zarazilo". Jako tomu je u plaváčků.
|
||
|
Časová prodleva: 11 dní
|
|||
| Ťunťa Profil * |
#7 · Zasláno: 18. 3. 2011, 08:57:59
Zdravím,
tak jsem něco zpachtil pro prohlížeče s podporou position:fixed, konkrétně: var support_fixed=false;
var a,b;
function fixed_compatibility(){
a=document.getElementById("a");
b=document.getElementById("b");
if(check_fixed()) {
support_fixed=true;
}
}
function sc(ScrollTop){
if (ScrollTop>=340 && support_fixed==true)
{
a.style.position='fixed'; a.style.left=0+'%';a.style.width=20.3+'%';
b.style.position='fixed'; b.style.left=81+'%';
a.style.top=0+'px';
b.style.top=0+'px';
} else
{
if(ScrollTop<340 && support_fixed==true)
{
a.style.position='relative';
b.style.position='relative';
b.style.left=0+'%';
a.style.width=25+'%';
}
}Funkce checkfixed() zjišťuje jestli prohlížeč podporuje position:fixed, vybufetil jsem jí někde na netu. Všechno to chodí celkem dobře, nicméně v opeře se to hrozně kouše. Čím to je? Čím to je... Živá ukázka |
||
| Plaváček Profil |
#8 · Zasláno: 18. 3. 2011, 08:59:43
Ťunťa:
A v IE 9 to nefunguje vůbec. |
||
| Ťunťa Profil * |
#9 · Zasláno: 18. 3. 2011, 09:10:02
Říkám že to mám hotový zatím pro prohlížeče který podporujou position:fixed.
|
||
| Plaváček Profil |
#10 · Zasláno: 18. 3. 2011, 09:17:16 · Upravil/a: Plaváček
Ťunťa:
No, a proč nepoužiješ již dávno známé řešení? Třeba to od Pixyho? http://www.pixy.cz/blogg/clanky/css-position-fixed/ Nebo mi něco uniká? |
||
| Ťunťa Profil * |
#11 · Zasláno: 18. 3. 2011, 09:30:40
Zrovna jsem si ho všiml když jsem poslal ten poslední příspěvek. Chjo zas to upravit aby se to posouvalo až po 340bodech. :-)
|
||
| Ťunťa Profil * |
#12 · Zasláno: 18. 3. 2011, 09:46:51
Tak mě napadá, jak to upravit aby se to posouvalo až po 340px ?
|
||
| Plaváček Profil |
#13 · Zasláno: 18. 3. 2011, 10:24:43
Ťunťa:
To už není práce pro CSS, ale Javascript, zkus tedy jiné vlákno, případně se inspiruj na tomto příkladu fixního menu: http://designm.ag/tutorials/sticky-sidenav-layout/ |
||
|
Časová prodleva: 13 let
|
|||
0