vertical-position:fixed

[HobbyBlobby]

Hallo

ich bin auf der Suche nach einer Möglichkeit, ein div-Element nur vertikal zu fixieren. Das heißt, beim Hoch-Runter-Scrollen soll der Inhalt auf der selben Höhe stehen bleiben, beim seitlichen Bewegen soll sich das Element allerdings anpassen (am besten relativ zum Elternelement).

Ich habe schon ein wenig im Netz gesucht, allerdings nichts gefunden. Allein mit css wird es vielleicht doch nicht möglich sein, aber eventuell mit Hilfe von Java-Skript?

Danke

[Kalle_B]

Hallo,

schau dir mal diese Seite an und mache das Fenster so klein, dass ein horizontaler Scrollbalken entsteht.

Die Überschrift der Tabelle scrollt auf und ab, aber wenn sie "ausser Sicht" gerät, wird sie am oberen Fensterrahmen "fixiert".

Links-rechts scrollt sie aber mit.

Gruß, Kalle

[steven]

nur so: das funktioniert bei mir im ie nicht - gibt mir auf der seite einen fehler an!

Hallo,

schau dir mal diese Seite an und mache das Fenster so klein, dass ein horizontaler Scrollbalken entsteht.

Die Überschrift der Tabelle scrollt auf und ab, aber wenn sie "ausser Sicht" gerät, wird sie am oberen Fensterrahmen "fixiert".

Links-rechts scrollt sie aber mit.

Gruß, Kalle

[Kalle_B]

nur so: das funktioniert bei mir im ie nicht - gibt mir auf der seite einen fehler an!

Danke für den Hinweis, bei mir mit dem IE auch nicht. Quellcode ist aber reichlich vorhanden. Da muss ich noch mal ran ...

Mit Opera klappt's.

Kalle

[Kalle_B]

Hallo,

habe mit Hilfe des HTML- und CSS- Validators die Seite valide.

Die Fehlerkonsole von Opera zeigt keinen Fehler, aber der IE 6 zeigt die Bilder nicht und behauptet hartnäckig:

Zeile: 1
Zeichen: 482
Fehler: ')' erwartet (ich identifiziere das Zeichen als runde Klammer zu)
Code: 0
URL: http://remso.de

Die Zeile 1 hat keineswegs 400+ Zeichen. Habe im Javascript die offenen Klammern geprüft, alle werden auch geschlossen.

Wo kann der Fehler liegen? Ist ja so schwer, dass der IE die Anzeige verweigert.

Gruß, Kalle

[ChrisB]

Hi,

Zeile: 1
Zeichen: 482
Fehler: ')' erwartet (ich identifiziere das Zeichen als runde Klammer zu)
Code: 0
URL: http://remso.de

Die Zeile 1 hat keineswegs 400+ Zeichen. Habe im Javascript die offenen Klammern geprüft, alle werden auch geschlossen.

Wo kann der Fehler liegen?

Mit etwas herumtrickserei und nicht immer nachstellbar, zeigt mir der MS Script Debugger hier

function FensterVeraendert() {  
  window.setTimeout("sizeBar('p590_bar','p590_table','p590_table_kopie')", 500);  
}  
window.onresize = FensterVeraendert;

die letzte zitiere Zeile als fehlerhaft an.

Wie er es schafft, in der eine schliessende runde Klammer zu vermissen, ist mir allerdings momentan auch nicht klar.

MfG ChrisB

[ChrisB]

Hi,

Wie er es schafft, in der eine schliessende runde Klammer zu vermissen, ist mir allerdings momentan auch nicht klar.

OK, etwas näher in Richtung Ziel (glaube ich - ist ziemlich schwer da durchzublicken, so verstreut wie die Scripte da über das ganze Dokument sind) - ziemlich weit unten innerhalb von BODY befindet sich folgendes:

<script type="text/javascript" language="javascript">[code lang=javascript]  
  var info_txt = "\  
  <img class=cur_help src='img/dok.gif' \ alt='Dokument' \  
  onClick=\" \ if ( document.getElementById( \'fix_oben\' ) ) document.getElementById( \'fix_oben\' ).style.display = \'none\'; \  
  alert( \  
   'URL=['+window.document.URL+']\\n' \  
  +'zielprogramm=[p590]\\n' \  
  +'sperr_kz=[0], []\\n' \  
  +'conn_id=[Resource id #3], []\\n' \  
  +'DB-Host=[localhost], []\\n' \  
  +'DB=[remso], []\\n' \  
  +'MySQL-Vers.=[5.0.51a-24+lenny2], []\\n' \  
  +'PHP-Vers.=[5.2.6-1+lenny3]\\n' \  
  +'window.name=['+window.name+']\\n' \  
  +'\\n' \  
  +'owner_id=[1]\\n' \  
  +'owner_titel=[Osmer]\\n' \  
  +'user=[remso&#039;s gast]\\n' \  
  +'sprache=[de]\\n' \  
  +'rechte_kz=[2]\\n' \  
  +'\\n' \  
  +'Programmname =[p590 - Umkreisorte mit Veranstaltungen]\\n' \  
  +'Programmstand=[2009-03-10 von p589]\\n' \  
  +'\\n' \  
  +'&copy; Softwareentwicklung Karl-Heinz Osmer - www.osmer.de\\n' \  
  ); \ if ( document.getElementById( \'fix_oben\' ) ) document.getElementById( \'fix_oben\' ).style.display = \'\'; \  
  \"> \  
";  
function zeigInfo() { // wird auch aufgerufen nach Ajax-Ladung  
  if( document.getElementById("info") ) document.getElementById("info").innerHTML = info_txt;  
}  
zeigInfo();

</script>[/code]

Wenn das ganz rausfliegt, dann meldet der IE zumindest mal keinen Fehler mehr.

Ob er mit der unorthodoxen Maskierung eines Zeilenumbruchs in JavaScript-Literalen an der Stelle Probleme hat, oder ob's noch was anderes ist, muss man mal untersuchen.

MfG ChrisB

[Kalle_B]

Hi, ChrisB,

danke dir für deinen Mühe.

Gruß, Kalle

[HobbyBlobby]

Hallo,

schau dir mal diese Seite an und mache das Fenster so klein, dass ein horizontaler Scrollbalken entsteht.

Die Überschrift der Tabelle scrollt auf und ab, aber wenn sie "ausser Sicht" gerät, wird sie am oberen Fensterrahmen "fixiert".

Das "fixiert" stimmt und ist sehr nett.

Links-rechts scrollt sie aber mit.

Bei mir im Firefox 3 scrollt die nicht links-rechts mit, sonder bleibt auch hier fixiert.

[HobbyBlobby]

Hallo,

schau dir mal diese Seite

Was ich aus dem Bsp entnehmen kann, dass ich sowas in dieser Art brauche:

<script type="text/javascript">

  
var scroll_y = 0;  
var old_top = 120;  
function InhaltVerschoben() {  
  if ( scroll_y != window.pageYOffset) {  
    document.[HIER-FEHLT-MIR-WAS].style.top = old_top + scroll_y;  
    old_top = old_top + scroll_y  
  }  
  scroll_y = window.pageYOffset;  
}  
  
window.onscroll = InhaltVerschoben;  

Dann lass ich die Formatierung bei "position = relative" (also nicht fixed) und simuliere das vertikale fixieren mit der Javaskript-Funktion.

Was mit noch fehlt: wie greif ich auf ein css-id zu?

Gruß

PS: entschuldigung, dass das Thema jetzt doch mehr javaskript ist (und nicht css)

[HobbyBlobby]

Zur Vollständigkeit halber noch der (bei mir) funktionierende Code:

  
var scroll_y = 0;  
function InhaltVerschoben() {  
 if ( scroll_y != window.pageYOffset) {  
  document.getElementById("MenuContent").style.top = window.pageYOffset + "px";  
 }  
 scroll_y = window.pageYOffset;  
}  
window.onscroll = InhaltVerschoben;  

Man beachte, dass der Anfangswert für "top" bei Null ist, sonst muss man noch einen Offset addieren.

Gruß