Zaawansowany sidebar

[Amfidiusz]

Hej,

Próbuję stworzyć seksowny sidebar do jednej z moich stron. Sidebar jaki jest, każdy wie:

W sieci jest pełno tutoriali dotyczących tworzenia tego typu dodatków. Jednak ostatnio widziałem coś ciekawszego. Mianowicie sidebar nie był na sztywno przymocowany w połowie ekranu, a był uzależniony od przewijania strony. Cięzko to wytłumaczyć, ale efekt był taki, że pasek ten zachowywał się tak, jakby był przylepiony na gumie - przewijając stronę w dół przesuwał się on trochę do góry, po czym wracał do pozycji wyjściowej po zakończeniu przewijania. Spotkał się ktoś z Was z podobnym rozwiązaniem? Niestety, nie zajrzałem wtedy do kodu źródłowego...

[Pavulon]

no właśnie chyba nie za bardzo rozumiem ocb

[Amfidiusz]

Wiedziałem, że mogłem na Ciebie liczyć!

[vBB]

Ja to bym nazwał taki bouncujący sidebar To z tym podwieszaniem gumki też dobre

Kiedyś coś takiego widziałem, ale też nie pamiętam gdzie...

[Macsch15]

Pewnie chodzi mu o coś takiego jak na demotywatorach - 'facebook'

Czyli jedziemy w źródle

<div class="widget_social">

<div style="color:#FFF; padding:10px 5px 0 35px;">
	 	<script type="text/javascript"
		src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/pl_PL"></script><script
		type="text/javascript">FB.init("4747e1995f2c8897bc27891f4de50c4a");
		</script>
		<fb:fan profile_id="191264696930" stream="0" connections="9" logobar="1"
		width="190" height="330"></fb:fan><div style="font-size:8px; padding-left:10px"><a
		href="http://www.facebook.com/demotywatory">Demotywatory</a> on
		Facebook</div>
</div>

css:

.widget_social{
float:right;
width:232px;
height:420px; 
background: url(/res/img/slider.png);
display:block;
right:-205px;
padding:0;
position:fixed;
top:170px;
z-index:100;
}

Tu masz efekt

http://macsch15.pl/example/widget/ (ten facebook)

to tak na szybko robiłem , o to chodzi ?

Edytowane 5 Kwietnia 2010 przez macsch15

[vBB]

Nie, to na pewno nie to. To był taki dosłownie jak na gumce zawieszony albo na sprężynie...

Edytowane 6 Kwietnia 2010 przez vBB

[Amfidiusz]

mac dzięki, ale ten zaprezentowany Facebook jest podwieszony na sztywno na środku ekranu. vBB dokładnie opisał to, o co mi chodzi - guma lub sprężyna

[vBB]

Coś takiego jak tutaj jest: http://patrys.jogger.pl/ - chodzi o zachowanie... bo sidebar to nie jest :]

Raz się pojawia reklama na środku (wyłaczcie AdBlocka) a raz przyczepiona z prawej strony ekranu.

Edytowane 6 Kwietnia 2010 przez vBB

[Amfidiusz]

Exactly!

Wie ktoś, jak uzyskać taki efekt?

[TRACKER]

Może nie jest to, o co Wam dokładniej chodzi ale tutaj znajdziecie różne przykłady... http://jqueryfordesigners.com/fixed-floating-elements/ i http://css-tricks.com/scrollfollow-sidebar/ - oczywiście należy trochę rzeczy pozmieniać aby to wyglądało jak chcecie, ale sama technika którą oczekujecie uzyskać jest taka sama.

Pozdro

[Amfidiusz]

Nie do końca. Fixed floating pozwala na utrzymanie wybranego elementu na widoku. Nie dodaje on animacji, której szukamy

Demo przykładu Trackera: http://static.jqueryfordesigners.com/demo/fixedfloat.html

[TRACKER]

Proszę Cię bardzo: http://davidwalsh.name/scroll-sidebar nic innego nie potrafię (a raczej nie chce mi się) wyszukać ;p

Nie obrażę się +rep ;p

[Amfidiusz]

O to właśnie chodziło! W przykładzie trochę opornie działa, ale pewnie można pobawić się ustawieniami. Dzięki!

[TRACKER]

Nie ma sprawy - kliknij plusik zielony ( ) i będzie luzik ;p