Bootstrap Snippet Fixed Header + Animation effects + Scroll effect + Navbar fade down effect v.2 [Updated] using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 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
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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