Morgen zusammen,
ich möchte das wenn man auf ner seite runterscrollt, dass sich das Menu ab ner bestimmten position sich fixiert und dann wenn man wieder nach oben scrollt, das es dann wieder normal dargestellt wird.
Ich habe mal in google nach Lösungen gesucht aber irgendwie keines funktioniert bei mir.. ich weiß nicht warum.
Mein jetziger code:
PHP
//Nur wegen den Highlights PHP genommen
<script>
$(document).ready(function($) {
var stickyHeaderTop = $('#nav').offset().top;
$(window).scroll(function(){ /*header-menu-wrap*/
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#nav').addClass("sticky-menu");
} else {
$('#nav').removeClass("sticky-menu");
}
});
});
</script>HTML
<!DOCTYPE html>
<html>
<head>
<title>Titel</title>
<meta charset="UTF-8">
<link href="index.css" rel="stylesheet">
</head>
<body>
<div id="nav">
<ul>
<li>Menuitem 1</li>
<li>Menuitem 2</li>
<li>Menuitem 3</li>
<li>Menuitem 4</li>
<li>Menuitem 5</li>
<li>Menuitem 6</li>
<li>Menuitem 7</li>
<li>Menuitem 8</li>
</ul>
</div>
<!-- hhhhhhhh nur um scrollen zu können -->
<p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br></p>
<p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br></p>
<p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br></p>
<p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br></p>
<p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br></p>
<p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br></p>
<p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br></p> <p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br></p>
<p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br></p> <p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br></p> <p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br></p> <p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br></p> <p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br></p> <p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br></p> <p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br></p> <p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br></p> <p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br></p> <p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br></p> <p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br></p> <p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br></p> <p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br></p> <p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br></p> <p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br></p> <p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br><br></p>
</body>
</html>Code
*
{
[COLOR=#87154F]padding[/COLOR]: [COLOR=#1906FD]0px[/COLOR];
[COLOR=#87154F]margin[/COLOR]: [COLOR=#1906FD]0px[/COLOR];
}
#nav
{
[COLOR=#87154F]background-color[/COLOR]:black;
[COLOR=#87154F]position[/COLOR]: [COLOR=#994509]relative[/COLOR];
[COLOR=#87154F][COLOR=#994509]top[/COLOR][/COLOR]: [COLOR=#1906FD]10px[/COLOR];
}
#nav li
{
[COLOR=#87154F]color[/COLOR]:white;
[COLOR=#87154F]display[/COLOR]: [COLOR=#994509]inline-block[/COLOR];
}
#nav ul
{
[COLOR=#87154F]padding[/COLOR]: [COLOR=#1906FD]5px[/COLOR];
}
p
{
[COLOR=#87154F]margin-top[/COLOR]: [COLOR=#1906FD]50px[/COLOR];
}
div.sticky-menu {
[COLOR=#87154F][COLOR=#994509]top[/COLOR][/COLOR]: [COLOR=#1906FD]0[/COLOR];
[COLOR=#87154F]position[/COLOR]: [COLOR=#994509]fixed[/COLOR];
[COLOR=#87154F]width[/COLOR]: [COLOR=#1906FD]960px[/COLOR];
[COLOR=#87154F]z-index[/COLOR]: [COLOR=#1906FD]1000[/COLOR];
}Hoffe ihr könnt mir helfen.
Stef
