Antworten zum Thema „Hilfe! das Menü bleibt beim Scrolllen stehen“

cmfa · 03.02.2014

Moin moin,

meinen Kronsohn hat in der Ausbildung zum IT-Elektr. die Aufgabe bekommen in eine vorhandene xhtml Seite eine Menü einzubauen, das seitlich mitläuft. In diesem Menü soll zu einem späteren Zeitpunkt eine Wetterapp erscheinen.
Als Grundlage diente .
Es wird auch wie gewünscht angezeigt. Jedoch wenn man in der Seite scrollt, dann bleibt das Menü starr an einem Punkt. Wie kann ich das ändern, das das auch in der xhtml Seite "mitläuft"?
Habe mal meinen Code angehängt.

VG CMFA

Der Quellcode und die DHTML-Bibliothek

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <title>Test dhtml </title>
  <link href="css/test.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="css/dhtml.js"></script>
<!-- eingefügt-->
<script type="text/javascript">
function Menue () {
  if (typeof window.pageYOffset == "number") {
    if (NS4) {
      getElement("id", "Nav").top = window.pageYOffset + 50;
    } else {
      getElement("id", "Nav").style.top = window.pageYOffset + 50;
    }
  } else {
    if (typeof document.body.scrollTop == "number")
      getElement("id", "Nav").style.top = document.body.scrollTop + 50;
  }
  if (OP)
    getElement("id", "NavLinks").style.pixelTop = NavLinksPos;
  if (NS4) {
    getElement("id", "Nav").visibility = "show";
  } else {
    getElement("id", "Nav").style.visibility = "visible";
  }
}

function noMenue () {
  if (NS4) {
    getElement("id", "Nav").visibility = "hide";
  } else {
    getElement("id", "Nav").style.visibility = "hidden";
  }
}

function handleMove (ev) {
  if (!ev)
    ev = window.event;
  var mausposition = ev.pageX ? ev.pageX : ev.clientX;
  if (mausposition < 20) {
    Menue();
  } else {
    if (mausposition > 250) {
      noMenue();
    }
  }
}

function Event_init () {
  if (document.addEventListener) {
    document.addEventListener("mousemove", handleMove, true);
  } else {
    if (NS4) {
      document.captureEvents(Event.MOUSEMOVE);
      document.onmousemove = handleMove;
    } else {
      document.body.onmousemove = handleMove;
    }
  }
  if (OP) {
    NavLinksPos = 42; // Position des Bereiches NavLinks
    getElement("id", "NavLinks").style.pixelTop = NavLinksPos;
  }
}
</script>

</head>
<body onload="Event_init()">
<div id="Nav">
<img src="css/navigation.gif" width="250" height="330" border="0" alt="" />
<div id="NavLinks">
   <iframe src="wetter.php" frameborder="0" height="270" width="100%" scrolling="no"></iframe></div>
</div>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

<p>Na, das d&uuml;rfte reichen :-)</p>
</body>
</html>

Code:

/* DHTML-Bibliothek */

var DHTML = false, DOM = false, MSIE4 = false, NS4 = false, OP = false;

if (document.getElementById) {
  DHTML = true;
  DOM = true;
} else {
  if (document.all) {
    DHTML = true;
    MSIE4 = true;
  } else {
    if (document.layers) {
      DHTML = true;
      NS4 = true;
    }
  }
}
if (window.opera) {
  OP = true;
}

function getElement (Mode, Identifier, ElementNumber) {
  var Element, ElementList;
  if (DOM) {
    if (Mode.toLowerCase() == "id") {
      Element = document.getElementById(Identifier);
      if (!Element) {
        Element = false;
      }
      return Element;
    }
    if (Mode.toLowerCase() == "name") {
      ElementList = document.getElementsByName(Identifier);
      Element = ElementList[ElementNumber];
      if (!Element) {
        Element = false;
      }
      return Element;
    }
    if (Mode.toLowerCase() == "tagname") {
      ElementList = document.getElementsByTagName(Identifier);
      Element = ElementList[ElementNumber];
      if (!Element) {
        Element = false;
      }
      return Element;
    }
    return false;
  }
  if (MSIE4) {
    if (Mode.toLowerCase() == "id" || Mode.toLowerCase() == "name") {
      Element = document.all(Identifier);
      if (!Element) {
        Element = false;
      }
      return Element;
    }
    if (Mode.toLowerCase() == "tagname") {
      ElementList = document.all.tags(Identifier);
      Element = ElementList[ElementNumber];
      if (!Element) {
        Element = false;
      }
      return Element;
    }
    return false;
  }
  if (NS4) {
    if (Mode.toLowerCase() == "id" || Mode.toLowerCase() == "name") {
      Element = document[Identifier];
      if (!Element) {
        Element = document.anchors[Identifier];
      }
      if (!Element) {
        Element = false;
      }
      return Element;
    }
    if (Mode.toLowerCase() == "layerindex") {
      Element = document.layers[Identifier];
      if (!Element) {
        Element = false;
      }
      return Element;
    }
    return false;
  }
  return false;
}

function getAttribute (Mode, Identifier, ElementNumber, AttributeName) {
  var Attribute;
  var Element = getElement(Mode, Identifier, ElementNumber);
  if (!Element) {
    return false;
  }
  if (DOM || MSIE4) {
    Attribute = Element.getAttribute(AttributeName);
    return Attribute;
  }
  if (NS4) {
    Attribute = Element[AttributeName]
    if (!Attribute) {
       Attribute = false;
    }
    return Attribute;
  }
  return false;
}

function getContent (Mode, Identifier, ElementNumber) {
  var Content;
  var Element = getElement(Mode, Identifier, ElementNumber);
  if (!Element) {
    return false;
  }
  if (DOM && Element.firstChild) {
    if (Element.firstChild.nodeType == 3) {
      Content = Element.firstChild.nodeValue;
    } else {
      Content = "";
    }
    return Content;
  }
  if (MSIE4) {
    Content = Element.innerText;
    return Content;
  }
  return false;
}

function setContent (Mode, Identifier, ElementNumber, Text) {
  var Element = getElement(Mode, Identifier, ElementNumber);
  if (!Element) {
    return false;
  }
  if (DOM && Element.firstChild) {
    Element.firstChild.nodeValue = Text;
    return true;
  }
  if (MSIE4) {
    Element.innerText = Text;
    return true;
  }
  if (NS4) {
    Element.document.open();
    Element.document.write(Text);
    Element.document.close();
    return true;
  }
}

Myhar · 03.02.2014

Was genau möchtest du erreichen? Möchtest du nun, dass das Menü immer rechts angezeigt wird (dann bleibt es starr an einem Punk, zB immer rechts oben im Eck) oder wie genau soll es mitscrollen? Das könntest du ruhig genauer beschreiben.
Allerdings kann ich dir nur raten, das JS/HTML zu entfernen, das ist veraltet. Du prüfst hier auf den Netscape Version 4 oder Internet Explorer in Version 4... Du solltest dich also dringend nach einem aktuellen Tutorial umsehen. Je nachdem, was du genau umsetzen willst, reicht es auch aus, nur CSS einzusetzen.

cmfa · 03.02.2014

Danke für die Antwort. Das es ein älteres Script ist war mir schon klar. Ich möchte es nur erreichen das es wie im Beispiellink funktioniert. Leider habe ich kein ähnliches Tutorial dazu gefunden. Wie könnte man so etwas mit mit "modernen" Mitteln umsetzen?

CMFA

Myhar · 03.02.2014

Das kann ich dir sagen, wenn du, wie bereits im vorigen Post angemerkt, dein Problem genauer beschreibst. Eventuell reicht position:fixed aus? (Beispiel)

cmfa · 03.02.2014

hier ist die Seite einsehbar. Das Menü sollte an jeder Stelle aufrufbar sein. Es bleibt aber im oberen Teil. In der Beispielseite aus dem ersten Pos. erseint es überrall

Myhar · 03.02.2014

Dann solltest du das mit :hover in Kombination mit position:fixed realisieren können.

cmfa · 03.02.2014

das mit dem fixed habe ich hinbekommen. Jedoch weiß ich nicht wo ich das hover einbauen soll hast du hier noch einen Tip für mich?

fakerer · 03.02.2014

Hi, ich weis zwar nicht was du mit dem hover vor hast, aber wenn ich das richtig verstanden habe musst du bei deiner #Nav die position auf fixed umstellen du hast dort jetzt absoulte

Myhar · 03.02.2014

cmfa schrieb:
wo ich das hover einbaue soll

Einfach gesagt: Da wo du es brauchst. Nachdem dein Menü erscheinen soll, wenn du über den linken Rand fährst, brauchst du am linken Rand ein Element (<div id="links"></div> )
Das kannst du nun absolut an den linken Rand positionieren und darauf dann das :hover (#links:hover) anwenden. Damit solltest du den dir erwünschten Effekt erzielen.

cythux · 03.02.2014

Ich bekomme unter Chrome nur eine leere weisse Seite angezeigt

cmfa · 03.02.2014

so das mit dem Hover konnte ich einiger Maßen lösen. Jedoch wird die App immer angezeigt und nicht wie gewünscht erst wenn man den hover . wo muss die jetz hin ?
@cythux wir richtig angezeigt ;-)

cythux · 03.02.2014

auch in FF oder Opera Mobile Emulator nur eine Weisse Stelle im Browser
Am besten nimmt du mal mit Mobil Boilerplate vor

und was du suchst ist etwas in Richtung OffCanvas