Einzelnen Beitrag anzeigen
  #3 (permalink)  
Alt 22.05.2017, 12:55
Soelg Soelg ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2012
Beiträge: 31
Soelg befindet sich auf einem aufstrebenden Ast
Standard Sticki Navigation

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
Mit Zitat antworten