Bootstrap Snippet Scroll to see the magic. using HTML CSS Javascript

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
<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
 <h1>Navi Mehra</h1>
    
    <div class="content">
        <h2>Scroll to see the magic.</h2>
        <div class="header__fake">
            <div class="icn__wrap">
                <i class="icn__hamburger"></i>
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="58px" height="58px" viewBox="0 0 16 16" preserveAspectRatio="none">
                    <circle cx="8" cy="8" r="6.215" transform="rotate(90 8 8)"></circle>
                </svg>
            </div>
            <i class="btm__border"></i>
        </div>
        <a href="https://www.facebook.com/people/Nav-Mehra/100008253515887"></a>
        <h1>Hi<span><a href="https://www.facebook.com/people/Nav-Mehra/100008253515887">Now scroll back up.</a></span></h1>
    </div>
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 {
  background: #02021a url("http://i.imgur.com/705GHlC.jpg") no-repeat 0 0;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  color: #fff;
  font-family: Helvetica Neue, Helvetica, Open sans, Arial, sans-serif;
  font-weight:lighter;
  letter-spacing:1px;
}
.content {
  width: 320px;
  position: relative;
  margin: 0 auto;
}
.content h2 {
  margin: 35px 0 0;
}
.content h1 {
  text-align: center;
  margin: 1000px 0 200px;
}
.content h1 span {
  display: block;
  width: 100%;
  margin: 5px 0 0;
  opacity: .5;
}
.content .header__fake {
  position: fixed;
  top: 15px;
  left: 50%;
  margin-left: -160px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <script>
    $header = $('.header__fake');
$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll > 20) {
        $header.addClass('animated').removeClass('fix');
    } else {
        $header.removeClass('animated').addClass('fix');
    }
  
});
    </script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Scroll to see the magic."
Bootstrap 3.3.0 Snippet by Navi Mehra

Related: See More

Questions / Comments:

"Scroll to see the magic." Bootstrap 3.3.0 Snippet by Navi Mehra

Related: See More

Questions / Comments:

"Scroll to see the magic."
Bootstrap 3.3.0 Snippet by Navi Mehra