Fix

Auf dieser Seite:

DHTML Objekt fixieren

Objekt_1 zeigt die CSS Eigenschaft position:fixed. Im Objekt_2 selbst wird durch ein kleines Script die CSS Eigenschaft position: von absolute zu fixed verändert. Dies kann auch durch einen Link bedient werden.

Am Ende steht ein Hack, den es eigentlich nicht mehr braucht, da der IE7 die CSS Eigenschaft position:fixed nun korrekt ausführt. Er setzt in alten IE die Position auf Absolut, weil diese sonst 'fixed' zu 'static' interpretieren würden, wobei die Position (unten rechts) des Objektes 'fixme' (siehe Beispiel) verlohren ginge.

Alle Objekte wurden an das Seitenende geschrieben (mit viel Leerraum zum Scrollen dazwischen), sie werden ja durch CSS positioniert.

Fix/Unfix Objekt_2 per Link

Das Stylesheet für alle 3 Objekte

<style type="text/css" media="screen">
#Objekt_1 {
  position:fixed;
  top:0px;left:0px;
  width:800px;
  background-color:Gold;
  border-bottom: 2px solid white;
  border-right: 2px solid white;
  padding:10px;
  z-Index:999;
}
#Objekt_2 {
  position:absolute;
  top:430px;left:240px;
  width:600px;
  background-color:Gold;
  padding:10px;
  z-Index:998;
}

/* Hack positioniert alte IE absolut */
#fixme { position: absolute; right: 0px; bottom: 0px; }
div > div#fixme { position: fixed; }
</style>
</script>

Das Objekt 2

onclick="this.style.position='fixed'

<div id="Objekt_2" onclick="this.style.position='fixed';" ondblclick="this.style.position='absolute';">...</div>

Das Javascript für den Link

<script type="text/javascript">
function stay() {
  var obj = document.getElementById("Objekt_2");
  if(obj.style.position=="fixed"){
    obj.style.position="absolute";
//  (falsch wäre: obj.style="position:absolute"; !!!)
  } else {
    obj.style.position="fixed";
  }
}
</script>

Der Link

<a href="#" onclick="stay();return false;">Fix/Unfix</a>

Ich bin das Objekt_1 und per CSS fixiert. An mir sehen Sie, ob Ihr Browser position:fixed kennt.

Ich bin das Objekt_2, ein Klick auf mich fixiert mich, ein Doppelklick positioniert mich.

F
i
x

M
e

Sticky Menü

Früher wurden recht komplexe Javascripts geschrieben, und onScroll ausgelöst, welche die Position eines Containers gemessen hatten und in Millisekundenintervallen diesen darauf zurücksetzten. >> Sticky Menü

Check den Code.

Move >> << Ein-Aus Schalter

Ich bin hier: > JavaScript Lehrling >>> Fix