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:

<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">&nbsp;</td>  
</tr>
<tr>
<td height="60" bgcolor="#0000FF">&nbsp;</td>  
</tr>
<tr>
<td height="2000" bgcolor="#FFFFFF">&nbsp;</td>  
</tr>
</table>

</div>

</body>
</html>

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 286667

Url: https://administrator.de/forum/mitlaufende-navigationsleiste-fehler-beim-hochscrollen-286667.html

Ausgedruckt am: 22.04.2025 um 11:04 Uhr

2 Kommentare

Neuester Kommentar

Moin.

<script type="text/javascript">  
$(document).ready(function() {
	$(window).scroll(function() {
           var vPos = ($(window).scrollTop() > 354)? $(window).scrollTop() : 354;
	   $('#scroller').css('top', vPos + 'px');  
       });
});
</script>

Gruß grexit