2
Mitlaufende Navigationsleiste ( Fehler beim Hochscrollen )
Hallo Leute,
ich hatte vor bei meiner Webseite das Menü etwas zu verändern und wollte gerne eine "mitlaufende“ Navigationsleiste einbauen. Jetzt habe ich allerdings folgende zwei Probleme.
1.)
Beim Hochscrollen hält das Navigationsmenü immer an einer anderen Stelle,
das heißt, es startet genau da wo es starten soll und geht auch mit wenn man runter scrollt
aber scrollt man wieder hoch bleibt es irgendwo stehen, aber immer an einer anderen Stelle.
Es müsste aber eigentlich genau auf dem blauen Balken liegen und diesen verdecken.
Kann mir jemand sagen warum die Navigationsleiste immer woanders stehen bleibt ?
2.)
Ich wollte das ganze noch so abändern, dass beim erreichen des Seitenendes das Menü wieder ausgeblendet wird. Wie kann ich denn dafür sorgen dass das Script weiß, dass der User jetzt am Ende der Seite angekommen ist, Mal abgesehen von einer festen Seitenhöhe ?
Grüße Simon
Hier ist mein Script:
ich hatte vor bei meiner Webseite das Menü etwas zu verändern und wollte gerne eine "mitlaufende“ Navigationsleiste einbauen. Jetzt habe ich allerdings folgende zwei Probleme.
1.)
Beim Hochscrollen hält das Navigationsmenü immer an einer anderen Stelle,
das heißt, es startet genau da wo es starten soll und geht auch mit wenn man runter scrollt
aber scrollt man wieder hoch bleibt es irgendwo stehen, aber immer an einer anderen Stelle.
Es müsste aber eigentlich genau auf dem blauen Balken liegen und diesen verdecken.
Kann mir jemand sagen warum die Navigationsleiste immer woanders stehen bleibt ?
2.)
Ich wollte das ganze noch so abändern, dass beim erreichen des Seitenendes das Menü wieder ausgeblendet wird. Wie kann ich denn dafür sorgen dass das Script weiß, dass der User jetzt am Ende der Seite angekommen ist, Mal abgesehen von einer festen Seitenhöhe ?
Grüße Simon
Hier ist mein Script:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript" src="Data/jquery-1.js"></script>
<link rel="stylesheet" type="text/css" href="Data/normalize.css">
<style type="text/css">
body {
margin-left: 0px;
margin-right: opx;
margin-top: 34px;
margin-bottom: 34px;
}
#scroller {
position: absolute;
top: 354px;
width: 950px;
height: 60px;
background: #FF0000;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$(window).scroll(function () {
if ($(window).scrollTop() > 354) {
$('#scroller').css('top', $(window).scrollTop());
}
}
);
});//]]>
</script>
</head>
<body bgcolor="#99CCFF" >
<div id="scroller">
<p align="center">Meine Navigation</div>
<div align="center">
<table
style="
-webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.75);
"
border="0" width="950" cellspacing="0" cellpadding="0">
<tr>
<td height="320" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td height="60" bgcolor="#0000FF"> </td>
</tr>
<tr>
<td height="2000" bgcolor="#FFFFFF"> </td>
</tr>
</table>
</div>
</body>
</html>
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 286667
Url: https://administrator.de/contentid/286667
Printed on: April 25, 2024 at 19:04 o'clock
2 Comments
Latest comment
Moin.
Gruß grexit
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function() {
var vPos = ($(window).scrollTop() > 354)? $(window).scrollTop() : 354;
$('#scroller').css('top', vPos + 'px');
});
});
</script>
Danke grexit,
hat funktioniert
hat funktioniert
