Temat: position:fixed;

Witam,
czy jest jakiś sposób na to, aby element pozycjonowany jako fixed, mógł się poruszać w ustalonych pozycjach, np. od topu 175px i zatrzymywał się na bottom, np. na 200px. Ustawiałem w css na różne sposoby, ale jak udało mi się ustawić na top, to zjeżdza mi na sam dół (a nie chciałbym, bo na na dole mam footer). Czy jest na to jakiś sposób w css?

Temat: position:fixed;

Przydałby się konkretny przykład do tego pytania.

Zakładając, że blok 'fixed' nie posiada sztywno ustalonej wysokości, będzie on uwzględniał top i bottom.
W przypadku sztywnej wysokości, potrzeba by dodatkowo dopisać kawałek kodu JS, który na podstawie przesunięcia dokumentu w pionie (tj. o ile px został zescrollowany) określałby którą z właściwości uwzględniać (top lub bottom).

Temat: position:fixed;

struktura w html:
<section id="produkty">
<div class="pos-center">
<div class="contener">
<section class="menu">
<ul>
<li class="kasy"><a href="uslugi_fiskalne.html">usługi fiskalne</a></li>
<li class="informatyka current-menu-item"><a href="#">usługi informatyczne</a></li>
<li class="naprawa"><a href="serwis_sprzetu_komputerowego.html"">serwis sprzętu</a></li>
<li class="abonamenty"><a href="#">abonamenty firmowe</a></li>
</ul>
<address>
<span class="kontakt">Szybki kontakt</span><br>
81 718 42 33<span class="phone"></span><br>
<a href="mailto:serwis@zeto.lublin.pl">napisz do nas</a><span class="mail"></span>
</address>
</section>
css:
#produkty .menu {
width:250px;
background:url(../img/cien_serwis_online.png) top right no-repeat;
position:fixed;
left:0px;
top:220px;
z-index:1;
height:400x;
}
#produkty .menu address {
background:#2f2c2c url(../img/kontakt_bg_01.jpg) repeat-x;
font-family:'exo_2.0regular';
padding:10px 10px 0px 16px;
border:1px dotted ##f2c2c;
border-radius:0px 10px 10px 0px;;
display:block;
text-align:right;
margin-top:0px;
color:#2f2c2c;
margin-right:14px;
box-shadow:3px 1px 6px #000000;
transition:width 2s ease-in-out;
-webkit-transition:width 2s ease-in-out;
width:230px;
z-index:10;
display:block;
line-height:16px;}

Temat: position:fixed;

chodzi mi to aby sekcja menu poruszała się tylko w contenerze, od samej góry do samego dołu i tylko tam. Fixed ma to do siebie, że div porusza się względem przeglądarki, a nie o to mi chodzi:(

chciałem uniknąć javy, bo nie mam o niej pojęcia, ale cóż...

kontynuacja css:
#produkty .menu ul {
padding-top:0px;
width:250px;
}
#produkty .menu ul li {
padding:10px 10px 10px 0px;
border-bottom:1px dashed #C9C0C0;
width:222px;
text-align:right;
transition:width 2s ease;
-webkit-transition:width 2s ease;}
#produkty .menu ul li.kasy {
background:url(../img/fiskalne-ikonka.png) 98% no-repeat;
}
#produkty .menu ul li.informatyka {
background:url(../img/informatyczne-ikonka.png) 98% no-repeat;
}
#produkty .menu ul li.naprawa {
background:url(../img/naprawa-ikonka.png) 98% no-repeat;
}
#produkty .menu ul li.abonamenty {
background:url(../img/abonament-ikonka.png) 98% no-repeat;
}
#produkty .menu ul li a {
display:block;
padding:5px 37px 5px 0px;
font-family:'exo_2.0medium';
}
#produkty .menu ul li:last-child {
border:none;
}
#produkty .menu ul li:hover {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity:0.7;
width:270px;
position:relative;
z-index:3;
border:0px;
}
#produkty .menu ul li.informatyka.current-menu-item:hover,
#produkty .menu ul li.naprawa.current-menu-item:hover,
#produkty .menu ul li.kasy.current-menu-item:hover {
transition:none;
-webkit-transition:none;
width:222px;
cursor:pointer;
}
#produkty .menu ul li.abonamenty.current-menu-item,
#produkty .menu ul li.naprawa.current-menu-item,
#produkty .menu ul li.informatyka.current-menu-item,
#produkty .menu ul li.kasy.current-menu-item {
background:#cacaca url(../img/fiskalne-ikonka-active.png) 98% no-repeat;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity:1.0;
color:#fff;
cursor:pointer;
transition:none;
-webkit-transition:none;
}
#produkty .menu ul li.informatyka.current-menu-item {
background:#cacaca url(../img/informatyczne-ikonka-active.png) 98% no-repeat;
}
#produkty .menu ul li.naprawa.current-menu-item {
background:#cacaca url(../img/naprawa-ikonka-active.png) 98% no-repeat;
}
#produkty .menu ul li.abonamenty.current-menu-item {
background:#cacaca url(../img/abonament-ikonka-active.png) 98% no-repeat;
}

#produkty .menu address .phone {
background:url(../img/iconmonstr-phone-icon-16.png) right no-repeat;
display:inline-block;
height:16px;
width:22px;}
#produkty .menu address .mail {
background:url(../img/iconmonstr-email-icon-16.png) right no-repeat;
display:inline-block;
height:16px;
width:22px;}
#produkty .menu address .kontakt {
font-weight:bold;
}
#produkty .menu address:hover {
width:290px;
z-index:1;
position:relative;
}
#produkty .menu address a {
border:none;
color:#837F97;
}Ten post został edytowany przez Autora dnia 16.02.14 o godzinie 16:57

Temat: position:fixed;

Jeżeli dobrze zrozumiałem chcesz aby element pływał?czy żeby przesuwał się w jakiś sposób ze stroną? bo jeśli ma się poruszać w conterze jak napisałeś to pozostaje tylko javascript.... kod jest banalnie prosty i jest pełno gotowców...
Poszperałem troche i jednak się myliłem da się to zrobic w CSS
http://www.w3schools.com/cssref/css3_pr_animation.asp
a tu przykład... wystarczy przerobić
http://www.w3schools.com/cssref/tryit.asp?filename=try...Ten post został edytowany przez Autora dnia 19.02.14 o godzinie 06:13

Temat: position:fixed;

animacja odpada, wg. mnie ma zastosowanie do m.in. do wykresów, do animowanego menu (itp), co trwa przez jakiś czas. Element ma pływać zgodnie z przesuwaną stroną. Najlepszy przykład w css to fixed, ale nie do końca mi to pasuje. Poszukam jakiś gotowców w js.