Jag har ett layer på min HTML-sida, och när jag scrollar, vill jag att den skall ligga still och inte påverkas av scrollen.
Går detta?
Layer som ligger stilla
11 svar · 320 visningar · startad av OveRRidE
har du testat med frames???
Om du bara har en bild eller nåt i ditt lager som du vill ska stanna hela tiden kan du använda stylesheets. T.ex:
<img src="dinbild.gif" style="position: absolute; left: 12px; top: 72px; width: 88px; height: 31px">
Detta fungerar med alla objekt och därför också med tabeller. Observera att det objektet du skriver sist hamnar överst!
position: absolute säger till att du vill ändra var objektet ska sitta själv, left, top, height och width tror jag nog du vet vad det är och px är förkortning av pixlar. hoppas det löste sig!
Theef skrev:
har du testat med frames???
:e
Jag vet hur frames funkar, det är inte det jag är ute efter. Detta är lite mer avancerat. ;)
Nexus > Nja, den följer med ändå. Menar du att det skall se ut såhär eller?
<div style="position:absolute" name="horses">
<img src="gfx/horses.gif" style="position: absolute; left: 12px; top: 72px; width: 88px; height: 31px">
</div>
Eftersom positionering bestämmer hur långt ifrån dokumentets, och inte fönstrets, kanter objektet ska ligga är det inte fullt så enkelt att fixa så att en bild (eller vad som helst) ligger i fönstrets överkant hela tiden.
Detta går att fixa med javascript, men riktigt hur det ska se ut vet jag inte.
Javascript låter bra. :)
Här har du ett enkelt script jag gjorde precis. Det måste dock byggas vidare för att fungera i Netscape.
<html>
<head>
<style>
.ontop {
position: absolute;
top: 0px;
right: 0px;
color: #FF0000;
}
</style>
<script>
function reposition(){
nyTop = document.body.scrollTop;
document.getElementById("ontop").style.top= nyTop;
}
</script>
</head>
<body onresize='reposition()' onscroll='reposition()'>
<div id='ontop' class='ontop'>Lite text som alltid ska synas</div>
</body>
</html>
Här kan du se hur det ser ut:
http://www.roslund.d2g.nu/mattias/krille/scroll.html
Hum..
Hur kommer det sig att följande kod inte fungerar i Netscape (6)?
function reposition() {
if (document.all) {
nyTop = eval(document.body.scrollTop + 20);
document.getElementById("ontop").style.top = nyTop;
} else {
nyTop = eval(pageYOffset + 20);
document.getElementById("ontop").style.top = nyTop + "px";
}
}
</script>
Det borde fungera, och gör det när jag provar i Mozilla 1.0. Det borde inte vara någon skillnad. Eval skall du inte behöva, men det gör ingen skada där det ligger...
När jag skiter i events, och bara kör funktionen om och om igen genom setTimeout, så som du har gjort, fungerar det bra.
Men om jag ändrar det till att onscroll ska sätta igång funktionen händer absolut ingenting i Netscape(6.2.3 i Win98). När jag ändrade onscroll='reposition()' till onscroll='alert("test")' hände inte heller något.