Ajax Loader
×
HTML
<header id="header">
1
<header id="header">
2
  <nav id="nav">
3
    <a href="#">One</a>
4
    <a href="#">Two</a>
5
    <a href="#">Three</a>
6
    <a href="#">Four</a>
7
  </nav>
8
</header>
9
 
10
<div class="slogan">
11
  <h2>This is a simple message.</h2>
12
</div>
13
 
14
<div class="info">
15
  <h3>This is a title.</h3>
16
  <p>This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph.</p>
17
  <div class="actions">
18
    <a href="#">Do Something</a>
19
  </div>
20
</div>
21
<div class="slogan alt">
22
  <h2>This is a simple message.</h2>
23
</div>
24
 
25
<div class="info">
26
  <h3>This is a title.</h3>
27
  <p>This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph.</p>
28
  <div class="actions">
29
    <a href="#">Do Something</a>
30
  </div>
31
</div>
32
 
33
<div class="slogan ">
34
  <h2>This is a simple message.</h2>
35
</div>
36
 
37
<div class="info">
38
  <h3>This is a title.</h3>
39
  <p>This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph.</p>
40
  <div class="actions">
41
    <a href="#">Do Something</a>
42
  </div>
43
</div>
44
 
45
<div class="slogan">
46
  <h2>This is a simple message.</h2>
47
</div>
48
 
49
<div class="info">
50
  <h3>This is a title.</h3>
51
  <p>This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph.</p>
52
  <div class="actions">
53
    <a href="#">Do Something</a>
54
  </div>
55
</div>
56
 
57
<div class="slogan alt">
58
  <h2>This is a simple message.</h2>
59
</div>
60
 
61
<div class="info">
62
  <h3>This is a title.</h3>
63
  <p>This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph.</p>
64
  <div class="actions">
65
    <a href="#">Do Something</a>
66
  </div>
67
</div>
 
CSS
body {
1
body {
2
  margin: 0;
3
  padding: 0;
4
  font-family: Source Sans Pro, sans-serif;
5
}
6
 
7
header nav {
8
  margin-top: 20px;
9
  text-align: center;
10
  background: black;
11
  opacity:0.5;
12
  color: white;
13
  font-size: 1.25em;
14
  position: absolute;
15
  width: 100%;
16
}
17
header nav a {
18
  color: inherit;
19
  text-decoration: none;
20
  display: inline-block;
21
  padding: .5em 1em;
22
}
23
header nav a:hover {
24
  color: red;
25
}
26
 
27
.slogan {
28
  background-image: url('http://ga-students.github.io/FEWD_NYC_19/projects/startup_matchmaker/images/coworking.jpg');
29
  background-position: center center;
30
  background-attachment: fixed;
31
  background-size: cover;
32
  text-align: center;
33
}
34
.slogan.alt {
35
  background-image: url('http://2.bp.blogspot.com/-3LROFHKu70o/UwdCZ4qvmkI/AAAAAAAAETw/MfjHOsgr8XI/s1600/IMG_7393.JPG');
36
}
37
.slogan h2 {
38
  color: white;
39
  font-weight: normal;
40
  font-size: 3em;
41
  padding: 2em 0;
42
  margin: 0;
43
  text-shadow: 0 0 10px black;
44
  background: rgba(0,0,0,.2);
45
}
46
 
47
.info {
48
  background: #900;
49
  color: white;
50
  padding: 3em 20%;
51
}
52
 
53
.actions {
54
  text-align: center;
55
}
56
.actions a {
57
  display: inline-block;
58
  border: 2px solid white;
59
  padding: .75em 1.5em;
60
  color: white;
61
  text-decoration: none;
62
  text-transform: uppercase;
63
  border-radius: 5px;
64
  letter-spacing: .15em;
65
  word-spacing: .25em;
66
  font-weight: bold;
67
transition: all 0.3s;
68
}
69
.actions a:hover {
70
  background:black;
71
}
72
.fixed{
73
  position: fixed;
74
}
 
JavaScript
var avatarElem = document.getElementById('nav');
1
var avatarElem = document.getElementById('nav');
2
 
3
 
4
    var avatarSourceBottom = avatarElem.getBoundingClientRect().bottom + window.pageYOffset;
5
 
6
    window.onscroll = function() {
7
      if (avatarElem.classList.contains('fixed') && window.pageYOffset < avatarSourceBottom) {
8
        avatarElem.classList.remove('fixed');
9
      } else if (window.pageYOffset > avatarSourceBottom) {
10
        avatarElem.classList.add('fixed');
11
      }
12
    };
 

Untitled

CSSDeck G+