WN - Navigationslist som inte scrollar med

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Navigationslist som inte scrollar med (https://www.wn.se/forum/showthread.php?t=10225)

robbanf

2005-10-08 18:41

Jag har gjort en "toolbar" i stil med den som finns högst upp på http://webhostingtalk.com/. Problemet är att jag vill ha den synlig längst upp i browsern hela tiden och inte scrolla med dokumentet upp.
Hur gör man det på bästa sätt?

koala

2005-10-08 19:33

Finns ett par alternativ:

1. använd en frame (den lätta lösningen)
2. använd en DIV (den moderna lösningen)

robbanf

2005-10-08 22:30

Det blir alternativ 2, men hur gör jag lite mer exakt?

hubbert

2005-10-09 00:31

Någonting så här:
I headtaggen:

Citat:

I body:

Citat:

<div class="text_main" style="height: 600px; left: 200px; top: 20px; z-index: 2; width: 600px; visibility: visible" id="texten">
*Här skriver vi texten och petar in bilder
</div>

Om du tittar på min profil och den sida jag angivet som hemsida ser du hur det kan se ut (det här kan inte betraktas som egenreklam, väl?)
Misstänker att det troligtvis finns lite smidigare lösningar, men det kommer vi få rätt på av andra WN-medlemmar såsmåningom :rolleyes:

Edit: Hm det här är en html-lösning så det kanske inte blev rätt, men låter det stå i allafall.
Edit2: Tog bort attributen för scrollbaren och bakgrunden i koden för att få en renare kod.

robbanf

2005-10-09 09:33

Jag får det ändå inte att funka. Vad exakt är det som gör att det inte scrollar med resten av dokumentet? Jag har följt ditt exempel men får det inte att funka (testat med olika browsers).

hubbert

2005-10-09 13:03

Citat:

<div class="text_main" style="height: 600px; left: 200px; top: 20px; z-index: 2; width: 600px; visibility: visible" id="texten">
*

Här skriver vi texten och petar in bilder</p>
</div>

<div id="toolbar" style="position:absolute; width:101px; height:72px; z-index:3; left: 19px; top: 16px">
*Länk 1

*Länk 2

*Länk 3</div>

Hm, du lägger in toolbaren som inte skall scrolla i en egen div (se fetskrift).

För säkerhetskull vill du att det skall se ut något sådant här Exempel div utan scroll för toolbar?

magga

2005-10-16 11:27

Enklast är att man skriver i css-filen:
position: fixed;
i den div som ska vara stilla.
Det fungerar inte i IE, men det sägs att det ska finnas stöd för det i nästa version.
Man kan ju hoppas...

Magga

Jonas

2005-10-19 10:34

Annars finns denna lösningen också:

Kod:

<script type="text/javascript">

window.onload = function startPolling()

{

        setInterval("poll()",100) // Sätt intervall på hur ofta det skall kännas av när man scrollar. 100 är en bra interval (0.1sek)

}



function poll()

{

        var f = document.getElementById("LAGER_ID"); // Skriv in ID på lager. Tex. toolbar

        if (navigator.appName == "Microsoft Internet Explorer")

        {

 var pos = document.body.scrollTop;

        }

        else

        {

 var pos = window.pageYOffset;

        }



        f.style.top = pos + 'px';



        return true;

}

</script>

Alla tider är GMT +2. Klockan är nu 14:29.