"Fixed Header + Animation effects + Scroll effect + Navbar fade down effect v.2 [Updated]"
Bootstrap 3.3.0 Snippet by chef1974

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fixed Header + Animation Effekts + Scroll Effekts + Navbar Fade-Down Effekt</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico"> </head> <body id="page-top"> <header> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"><a class="navbar-brand navbar-link" href="https://www.instagram.com/exp__designer/" target="_blank">Dize Design</a> <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> </div> <div class="collapse navbar-collapse" id="navcol-1"> <ul class="nav navbar-nav navbar-right"> <li role="presentation"><a href="#" class="scroll-link" data-id="page-top">Back to Top</a></li> </ul> </div> </div> </nav> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>sky climber's </h1> <p>Climb up with us. </p> </div> <div class="col-md-12"> <section id="section05" class="demo arrow"><center> <h1></h1><a href="#" class="scroll-link" data-id="go"><span></span>Scroll Down</a></center></section> </div> </div> </div> </header> <section id="go"> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>or make youre way</h1> <p>Be Creative</p> </div> </div> </div> </section> </body> </html>
body { height:100%; width:100%; } header { background-image:url('https://img3.picload.org/image/ddwidwrl/header-test.jpg'); height:100vh; background-size:cover; /*background-attachment:fixed;*/ background-position:center center; background-repeat:no-repeat; } header .row { margin-top:255px; } header h1 { text-align:center; color:#eee; text-shadow:1px 1px 1px #333; font-weight:600; text-transform:uppercase; font-family:'Pacifico'; letter-spacing:13px; } header p { text-align:center; color:#eee; text-shadow:1px 1px 1px #333; font-size:17px; letter-spacing:2px; padding-top:15px; } #go { padding-top:20px; background-image:url('https://img3.picload.org/image/ddwidwra/header-180.jpg'); height:100vh; background-position:center center; background-repeat:no-repeat; background-attachment:fixed; } #go .row { padding-top:45%; } #go h1 { text-align:center; color:#eee; text-shadow:1px 1px 1px #333; font-weight:600; text-transform:uppercase; font-family:'Pacifico'; letter-spacing:13px; } #go p { text-align:center; color:#eee; text-shadow:1px 1px 1px #333; font-size:17px; letter-spacing:2px; padding-top:15px; } /* NAVBAR */ .navbar-default { background-image:none; background-image:none; background-image:none; background-image:none; filter:none; filter:progid:DXImageTransform.Microsoft.gradient(enabled=false); background-repeat:repeat-x; border-radius:0px; -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075); box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075); background-color:transparent; } .navbar-default .navbar-link:hover { color:#eee; } .navbar-default .navbar-link { color:#fff; letter-spacing:3px; text-shadow:0px 0px 10px #000; } .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover { color:#eee; background-color:transparent; } .navbar-default .navbar-nav > li > a { color:#fff; letter-spacing:3px; text-shadow:0px 0px 10px #000; } /* Scroll Down */ #section05 a { padding-top:70px; } #section05 a span { position:absolute; top:0; left:50%; width:24px; height:24px; margin-left:-12px; border-left:1px solid #fff; border-bottom:1px solid #fff; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-animation:sdb05 1.5s infinite; animation:sdb05 1.5s infinite; box-sizing:border-box; } @keyframes sdb05 { 0% { transform:rotate(-45deg) translate(0, 0); opacity:0; } 50% { opacity:1; } 100% { transform:rotate(-45deg) translate(-20px, 20px); opacity:0; } } .demo a { bottom:20px; z-index:4444; display:inline-block; -webkit-transform:translate(0, -50%); transform:translate(0, -50%); color:#fff; font:normal 400 17px/1 'Josefin Sans', sans-serif; letter-spacing:.1em; text-decoration:none; transition:opacity .3s; } .demo a:hover { opacity:.5; } .arrow { margin-top:155px; }
/* Fade */ (function ($) { $(document).ready(function(){ // hide .navbar first $(".navbar").hide(); // fade in .navbar $(function () { $(window).scroll(function () { // set distance user needs to scroll before we start fadeIn if ($(this).scrollTop() > 200) { $('.navbar').fadeIn(); } else { $('.navbar').fadeOut(); } }); }); }); }(jQuery)); /* One-Page Scrolling */ $(document).ready(function() { // navigation click actions $('.scroll-link').on('click', function(event){ event.preventDefault(); var sectionID = $(this).attr("data-id"); scrollToID('#' + sectionID, 1250); }); // scroll to top action $('.scroll-top').on('click', function(event) { event.preventDefault(); $('html, body').animate({scrollTop:0}, 'slow'); }); // mobile nav toggle $('#nav-toggle').on('click', function (event) { event.preventDefault(); $('#main-nav').toggleClass("open"); }); }); // scroll function function scrollToID(id, speed){ var offSet = 0; var targetOffset = $(id).offset().top - offSet; var mainNav = $('#main-nav'); $('html,body').animate({scrollTop:targetOffset}, speed); if (mainNav.hasClass("open")) { mainNav.css("height", "1px").removeClass("in").addClass("collapse"); mainNav.removeClass("open"); } } if (typeof console === "undefined") { console = { log: function() { } }; } /* Scroll Down */ $(function() { $('a[href*=#]').on('click', function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear'); }); });

Related: See More


Questions / Comments: