Autor Zpráva
Ťunťa
Profil *
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
Ťunťa:
jde to jen JavaScriptem, samotné CSS na tohle nestačí.
1Pupik1989
Profil
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 *
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
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 *
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ů.
Ťunťa
Profil *
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
Ťunťa:

A v IE 9 to nefunguje vůbec.
Ťunťa
Profil *
Říkám že to mám hotový zatím pro prohlížeče který podporujou position:fixed.
Plaváček
Profil
Ť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 *
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 *
Tak mě napadá, jak to upravit aby se to posouvalo až po 340px ?
Plaváček
Profil
Ť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/

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: