Danke für Deine Antwort!
Ich sende Dir den Link und den heruntergeladenen Code einmal zu:
fancy sticky nav
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Titel</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<link href="style.css" type="text/css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<script type="text/javascript">
var $header = $('header'),
$headerHeight = $header.height(),
$title = $('.title');
var navScroll = {
init:function(){
$(window).on('scroll',function(){
navScroll.navDrop();
})
},
navDrop:function(){
var $scrollTop = $(window).scrollTop();
if($scrollTop > $headerHeight){
$header.addClass('scrolled');
$title.css('padding-top','70px');
}
else if($scrollTop == 0) {
$header.removeClass('scrolled');
$title.css('padding-top','0');
}
}
}
$(document).ready(function(){
navScroll.init();
})
</script>
<body>
<div class="container">
<header class="header">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
</header>
<div class="title">
<h1>fancy sticky nav</h1>
<p>vv scroll vv</p>
</div>
</div>
</body>
</html>
Code:
html {
width: 100%;
height: 100%;
}
.container {
height: 2000px;
background: radial-gradient(circle, #ffffff 0%, #a6b9c1 100%) no-repeat;
}
.container header {
position: relative;
width: 100%;
height: 70px;
top: 0;
background: none;
transition: background 500ms ease;
-webkit-transition: background 500ms ease;
}
.container header.scrolled {
position: fixed;
top: -70px;
background: gray;
transform: translateY(70px);
transition: transform 500ms ease,background 900ms ease;
-webkit-transition: transform 500ms ease,background 900ms ease;
}
.container header nav {
width: 100%;
margin: 0 auto;
height: 100%;
text-align: center;
}
.container header nav ul {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.container header nav ul li {
display: inline;
margin-right: 20px;
}
.container .title {
width: 100%;
text-align: center;
}
.container .title h1 {
margin-top: 150px;
font-size: 40px;
font-family: helvetica;
color: #555;
font-weight: bold;
}
.container .title p {
font-family: helvetica;
color: #555;
font-weight: bold;
}
a {
text-decoration: none;
color: #000;
font-family: helvetica;
font-size: 16px;
}
Ich habe den Code auch über Webdeveloper geprüft und keine Fehler gefunden. Die Animation funktioniert nach wie vor nicht auf meinem Computer.
Danke für Deine Hilfe!
Gruß
Dieter