✔ Menü immer sichtbar programmen

xenomjay

xenomjay

Mitglied
Hallo Leute,

auf meiner Homepage (http://www.autoplausibel.de) versuche ich schon die ganze Zeit mein Menü so zu programmieren, dass es nicht oben stehen bleibt, sondern beim runterscrollen quasi mitgeht. Nun habe ich das Menü in CSS geschrieben und versucht dort mein Lösung zu finden. Leider aber erfolglos. Weil Java zu den einfacheren Sprachen gehört, suche ich nun hier weiter. Hatte auch schon einen längeren Code gefunden. Das Problem ist nur, dass ich bei Java recht neu bin und mich in der Befehlsdatenbank nur minimal auskenne. Könnte mir da bitte jemand mit einem kurzen Tipp den rechten Weg weisen? Dafür wäre ich sehr dankbar.

Mit freundlichen Grüßen
xenomjay
 
Hi,

Du meinst sicher JavaScript JavaScript != Java, JavaScript ist nicht Java...und dem zufolge bist Du hier falsch.

hmf
 
Hi,

möglich wäre das Überwachen des onscroll-Events. Tritt dieses Ereignis ein, so wird das Element entsprechend dem gescrollten Bereich neu positioniert.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">
  <!--
.mitlaeufer{ position: absolute;
             top: 10px;
             right: 10px;
             z-index: 99;
             border: 5px solid #ccc;
             background: #000;
             color: #efefef;
             padding: 6px;}
 //-->
</style>

<script type="text/javascript">
  <!--
var intTopOffset = 10;  // Abstand nach oben
var hTimer = null;
var objBody = null;

window.onload = function(){
  if(document.all && !window.opera)
    objBody = (window.document.compatMode == "CSS1Compat")? window.document.documentElement : window.document.body || null;
  else
    objBody = window.document.documentElement;
}

window.onscroll = function(){
  if(document.all){
    document.getElementById("posID").style.top = objBody.scrollTop + intTopOffset + "px";
  }else{
    document.getElementById("posID").style.top = window.pageYOffset + intTopOffset + "px";
  }
}
 //-->
</script>
</head>
<body>
<div class="mitlaeufer" id="posID">Der Mitläufer!</div>
<div style="height: 2000px;">Höhen-DIV</div>
</body>
</html>
Ciao
Quaese
 
Ich weiß nicht ob ich dich jetzt wirklich richtig verstanden hab, aber wenn du das Menü auf der linken Seite meinst füge doch mal in deine CSS-Datei (welche übrigens ein Kodierungsproblem hat; siehe den untersten Kommentar wo der Umlaut nicht richtig dargestellt wird) einfach folgenden Block ein:
Code: 
#MenuBar1 {
 position:fixed;
}
 
@Quase: danke für deine Hilfe. Hat mir sehr geholfen habe das Menü auch so hinbekommen, dass es mitscrollt jetzt habe ich nur das Problem, dass durch das Höhen-Div die Größe fest auf 2000px festgelegt wird wodurch es sogar über den footer hinausschießt. Das ließe sich zwar leicht beheben, nur ist es zusätzlich ja so, dass sich das Menü beim Zurückscrollen an den Seitenanfang über den header schiebt, obwohl es vor dem ersten Scrollen unter demselbigen befand. Das liegt dann wohl an dem festen Abstand zum oberen Browserrand. Kann ich das irgendwie umprogrammieren, sodass es auch beim Zurückscrollen an seine ursprüngliche Position zurückkehrt? Kann ich das Mitscrollen vom Menü auch weicher/flüssiger gestalten?

@tamtam: Danke auch für deinen Beitrag. Das habe ich auch schon versucht. Nur entstehen dadurch beim scrollen im mainContent hässliche Schlieren bei Bildern beispielsweise. Und die bekommt ja auch nicht weg oder? Habe nach dem Problem schon gesucht aber auch keine Lösung gefunden. Sonst wäre das ja eine sehr elegante und einfache Lösung meines Problems.

Mit freundlichen Grüßen
xenomjay
 
Habe es jetzt mit deiner JavaScript Lösung gemacht. Danke dafür. Kann ich das Mitscrollen etwas weicher/flüssiger programmieren ?
 
Hi,

habe noch nen kleinen Nachbrenner:-)
Musste meine Page aufgrund eines CSS-Fehlers, den ich nicht gefunden habe neu programmieren und habe wieder das Javascript eingefügt. Ich habe das Script nicht verändert sondern einfach kopiert, da die id die gleiche ist sollte es doch funktionieren. Aber wider erwarten scrollt das Menü im Firefox nicht mit. Komisch ist nur, dass es dafür aber im Internet Explorer mitscrollt. Habe schon den Code durchgesucht und bin am Verzweifeln. Hat einer ne Idee? Danke schonmal im Voraus.

Hier das CSS:

Code: 
ul.MenuBarVertical
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: 100px;

Hier der Code:

Code: 
      <div id="sidebar1">
      <script type="text/javascript">
  <!--
var intTopOffset = 10;  // Abstand nach oben
var hTimer = null;
var objBody = null;

window.onload = function(){
  if(document.all && !window.opera)
    objBody = (window.document.compatMode == "CSS1Compat")? window.document.documentElement : window.document.body || null;
  else
    objBody = window.document.documentElement;
}

window.onscroll = function(){
  if(document.all){
    document.getElementById("MenuBar1").style.top = objBody.scrollTop + intTopOffset + "px";
  }else{
    document.getElementById("MenuBar1").style.top = window.pageYOffset + intTopOffset + "px";
  }
}
 //-->
</script>

         <ul id="MenuBar1" class="MenuBarVertical">
             <li><a href="index.php?action=update">Update</a> </li>
          <li><a href="index.php?action=news">News</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Zeitlos</a>
                 <ul>
                   <li><a href="index.php?action=080530">30.05.2008<br />
                     Karinas Party</a></li>
                   <li><a href="index.php?action=080616">16.06.2008<br />
                     Zuhause</a></li>
                   <li><a href="index.php?action=080621">21.06.2008<br />
                     Nikkis Geburtstag</a></li>
                   <li><a href="index.php?action=080718">18.07.2008<br />
                     Zuhause</a></li>
                   <li><a href="index.php?action=080801">01.08.2008<br />
                     Zuhause</a></li>
                 </ul>
             </li>
             <li><a href="#" class="MenuBarItemSubmenu">26fps</a>
         <ul>
                   <li><a href="index.php?action=galactica">Battlestar Galactica</a></li>
                   <li><a href="index.php?action=house">Dr.House</a></li>
                   <li><a href="index.php?action=heroes">Heroes</a></li>
                   <li><a href="index.php?action=lost">Lost</a></li>
                   <li><a href="index.php?action=telemedial">Telemedial</a></li>
                 </ul>
             </li>
          <li><a href="index.php?action=hardware">Hardware</a> </li>
             <li><a href="#" class="MenuBarItemSubmenu">Besorgungen</a>
             <ul>
                   <li><a href="index.php?action=besorgen_thunderbird">Mozilla Thunderbird</a></li>
                 </ul>
             </li>
             <li><a href="#" class="MenuBarItemSubmenu">Erkl&auml;rt</a>
             <ul>
                   <li><a href="index.php?action=erklaert_thunderbird">Mozilla Thunderbird</a></li>
                 </ul>
             </li>
          <li><a href="index.php?action=gb">G&auml;stebuch</a></li>
             <li><a href="index.php?action=verbindung">Verbindung</a></li>
             <li><a href="index.php?action=impressum">Impressum</a></li>
        </ul>
      </div>
 
Hi,

sieht so aus, als würde die CSS-Eigenschaft position: absolute in deiner Klasse ul.MenuBarVertical fehlen.

Zum variablen Abstand zum oberen Fensterrand könntest du prüfen, ob der Scrollbereich (scrollTop bzw. pageYOffset) grösser als der erforderliche Mindestabstand ist, setzt du den konstanten Abstand. Im anderen Fall lässt du das Offset berechnen (Mindestabstand - Scrollbereich).

Deinen Doppelpost habe ich gelöscht und bitte dich darum, ein solches Vorgehen in Zukunft zu unterlassen.

Ciao
Quaese
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück