position: fixed für -to Top- Navigation ja oder nein?

Die, die jetzt erstaunt sind, oder hier ausschliesslich css3-Beiträge erwarten, bitte „weglesen“, natürlich gibt es position:fixed schon länger (CSS level 2).

Es zeigte sich bei mir eine Unzufriedenheit mit der Navigation auf meiner Seite. Ich bin in letzter Zeit eigentlich sehr viel mit dem Pad im Internet. Gerade zum Lesen und Stöbern im Internet ist das ziemlich bequem, … Was mich aber auch an dieser Seite stört, ist das Hochscrollen, wenn man dann am Ende einer (dann auch noch sehr langen) Seite angekommen ist. Schön ist da natürlich grundsätzlich ein Link „nach Oben“, was dieses Theme aber von Haus aus schon hatte.

Letztendlich musste ich dann immer entscheiden, scrolle ich jetzt nach unten bis zum Link „nach Oben“ oder gleich nach oben. Schön fand ich dann einige Seiten, die position:fixed für solche Zwecken (wieder-)entdeckt haben.

Hier mein:

PING[uin] to TOP for P<s>o</s>ads“ /></p>
<h2 title=PING[uin] to TOP (for Poads)

Wer das alles nur für PAD’S ausliefern will, nutzt einfach die CSS3-Mediaqueries.

Ich habe hier im Theme jetzt den to-top-Link rausgenommen und an das Ende der footer.php den Anfang in einen eigenen div-Kontainer gesezt.

/* ** CSS 4 PING[uin] to TOP *** */
#footer-navigation{
width: 100%;
position: fixed;
bottom: 0;
left: 0;
background: rgba(105,166,204, .8); /* #69A6CC; */
z-index: 1000;
padding: 5px;
text-align: right;
}

/* Der kleine „Pinguin“ unten links ist auch mit einem „nach Oben“ Link *** */
/* versehen, also auch klickbar, hier habe ich mir die ID des Kontainers und *** */
/* den (href des) to-top-link gegriffen und auch unten fix positioniert: *** */

#footer-navigation a::after{
content: url(http://www.css3.de/css3-LoGO.png) attr(href);
display: block;
width: 90px;
height: 90px;
z-index: 1010;
position: fixed;
bottom: 1px;
right: 30px;
}

#footer-navigation a::before{
display: block;
content: “ ^^__^^ „;
color: black;
position: fixed;
right: 220px;
bottom: 5px;
}

/* [title^=’nach‘]::before { */
/* display: block; */
/* content: “ ^^__^^ „;*/
/* color: black; */
/* das ist nur aus Langeweile, hätte natürlich #footer-navigation a::before nehmen können */
/* } */

#footer-navigation a {
color: #fff;
padding-right: 130px;
}

Vielleicht gebt ihr einmal kurz Rückmeldung, ob das, so wie ich das gemacht habe, auch praktikabel ist?

position fixed? Ja oder Nein?

Als Logo verwende ich eine Abwandlung/Anpassung der Grafik „Pilot Penguin“ von OpenClipArt, LINK, Benutzer: osotogari

THANKS for this!

Kommentare (2)

  1. iPhone 4 funktioniert gut [portrait + landscape]

    iPad 3 – funktioniert gut [portrait + landscape]

  2. Pingback: PING[uin] 2 TOP 4 Pads V1.0 | CSS3.de

Kommentare sind geschlossen.