Parallax und Bootstrap
Code Sources Icon Code Sources Icon Code Sources Icon


Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.
HTML Elemente

Anleitung

Die Parrallax-Anordnung wird in ein Bootstrap-Layout gepackt. Das ermöglicht:

  • Eine Affix-Header-Navigation (der Header lässt sich nach oben scrollen, die Navigation bleibt am oberen Browserrand ersichtich)
  • Die Navigation zu den einzelnen Sections wird mit jeweils einem Anker ausgeführt. Bei Klick wird der Anker ausferufen, der Scrollbereich entsprechend gesetzt
  • Mit SmoothScroll wird erreicht, dass bei Klick auf einen Navigationspunkt die Seite nicht springt, sondern zum Ankerpunkt rollt
  • Safari-Browser macht da leider nicht mit, Apple bleibt wie oft Eigensinnig.

 

Affix-Header
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="197">
  <div class="container-fluid">
    <div class="navbar-header">
        ...
    </div>
</div>
</nav>

 

Bootstrap CSS

Für den Affix.Header werden die JS-Bibliotheken von jQuery und Bootstrap, zudem die Bootstrap CSS-Datei benutzt:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 

SmoothScroll

Die Eigenschaft gillt noch als "Arbeitsentwurf", wird aber von allen aktuellen Browserversionen unterstützt.

    html {
        scroll-behavior: smooth;
    }
DB-Table: parallax-bootstrap