zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Sticky Navigation

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.05.2017, 11:03
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2012
Beiträge: 31
Soelg befindet sich auf einem aufstrebenden Ast
Standard Sticky Navigation

Hallo,
ich habe den folgenden Code bei codepen heruntergeladen.

https://secure.justanswer.de/

Das Script funktioniert aber leider nicht.
Woran kann das liegen?

Beste Grüße
Dieter
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.05.2017, 09:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.067
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Du sprichst von codepen und lieferst einen Link zu justanswer.de? Wo ist das Script, welches du "heruntergeladen" hast?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.05.2017, 11:55
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
  #4 (permalink)  
Alt 22.05.2017, 13:03
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Wenn wir nicht wissen was das Script machen soll und was genau bei dir nicht funktioniert, können wir nicht helfen.

Bei mir ist anfangs eine Navigation zu sehen, die kurz verschwindet und nach ein bisschen Scrollen oben sichtbar bleibt. Mac, Firefox.
Mit Zitat antworten
  #5 (permalink)  
Alt 22.05.2017, 15:59
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2012
Beiträge: 31
Soelg befindet sich auf einem aufstrebenden Ast
Standard Sticky Navigation

Bei mir verschwindet die Navigation beim Scrollen und wird nicht fixiert.
Ich habe das Script in mehreren Browsern getestet.

Hast Du dafür eine Erklärung?

Beste Grüße
Dieter
Mit Zitat antworten
  #6 (permalink)  
Alt 22.05.2017, 16:08
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Drück dich doch bitte besser aus, ich bin davon ausgegangen dass der von dir genannte Link nicht funktioniert. Nun wo ich deinen Code nachgebaut habe, habe ich festgestellt dass du diesen wohl eher meinst? Dort klappt es bei mir nämlich auch nicht.

Dein gesamter <script>-Block sitzt an der falschen Stelle. Zwischen <head> und <body> ist er sowieso falsch. Setze ihn an das Ende vom body, also direkt vor dem schließenden </body>. Dann klappt es.

Die Zeile wo du jQuery einbindest kann so stehen bleiben oder du setzt sie ebenfalls an das Ende von </body>.
Mit Zitat antworten
  #7 (permalink)  
Alt 22.05.2017, 21:21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2012
Beiträge: 31
Soelg befindet sich auf einem aufstrebenden Ast
Standard Sticky Navigation

Ganz herzlichen Dank für Deine Lösung!
Ich bin sehr beeindruckt für Deine schnelle Hilfe und Antworten. Nun funktioniert der Code auch bei mir.

Ich wünsche Dir eine schöne Woche und herzliche Grüße

Dieter
Mit Zitat antworten
  #8 (permalink)  
Alt 23.05.2017, 09:37
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Gern geschehen.

Ich fand deine Formulierung aber verwirrend und musste erstmal selbst alles zusammenbauen um das eigentliche Problem zu verstehen.
Mit Zitat antworten
  #9 (permalink)  
Alt 23.05.2017, 18:55
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2012
Beiträge: 31
Soelg befindet sich auf einem aufstrebenden Ast
Standard

Ich danke Dir nochmals ganz sehr für Deine schnelle und kompetente Hilfestellung!

Grüße
Dieter
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
java script, navigation, sticky

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Ausrichtung Kalender greece4u CSS 20 14.05.2012 13:32
Navigation ist nicht mittig Schokokrapfen CSS 29 19.09.2011 23:19
Problem mit Navigation safari CSS 12 20.04.2011 11:11
Float-Problem? mischaef CSS 33 20.10.2010 16:20
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 15:29


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:50 Uhr.