-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (124 loc) · 11.7 KB
/
index.html
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<html>
<head>
<title>Active menu style on scroll</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
p { font-size: 18px; line-height: 24px; }
#Home, #About, #Services, #Contact { padding: 50px 0; }
</style>
</head>
<body>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
<div class="container">
<div class="navbar-header">
<ul class="nav nav-pills">
<li class="active"><a href="#top" id="link01">Home</a></li>
<li><a href="#About" id="link02">About</a></li>
<li><a href="#Services" id="link03">Services</a></li>
<li><a href="#Contact" id="link04">Contact</a></li>
</ul>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-8" id="Home">
<h1>Home</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris placerat accumsan aliquam. Nulla posuere mattis tellus ac feugiat. Curabitur non sem porttitor, mollis leo at, ultrices quam. Donec interdum, libero ac mattis imperdiet, massa enim aliquet lacus, accumsan vehicula nisi purus id ipsum. Maecenas convallis accumsan orci. Integer a consequat tortor, accumsan malesuada diam. Sed lobortis iaculis ultrices. In a magna vulputate, ultricies sem sed, vehicula justo.</p>
<p>Suspendisse sed rutrum nisl. Etiam egestas augue id turpis imperdiet hendrerit. Aliquam in odio feugiat nunc bibendum gravida. Nulla auctor tincidunt est eget gravida. Vivamus ac rhoncus metus, y la Oficina de dui. Morbi a augue venenatis, sollicitudin , y es, accumsan purus. Duis mattis sodales ipsum in condimentum. Pellentesque eleifend, leo in aliquet aliquet, mi conexión a Internet fringilla nisi, vitae congue turpis mauris in magna. Curabitur eget nunc id massa ultricies volutpat sed sed ipsum. Ut vestibulum risus eu vulputate porta. Vestibulum orci augue, tincidunt quis est non, dictum varius augue. Etiam nec libero consectetur, aliquam odio vel, consectetur lectus. In hendrerit scelerisque quam quis adipiscing. Integer viverra rhoncus ante ut semper. Duis ut tincidunt risus, non convallis neque.</p>
<p>Donec vel hendrerit ahora, y varius nisl. Quisque tincidunt rutrum interdum. Suspendisse auctor adipiscing lectus, at varius erat blandit vitae. Fusce sed lorem odio. Mauris vitae lacinia purus. In facilisis dictum justo rutrum sagittis. Proin lobortis tortor dui, eget bibendum massa porttitor quis. Donec bibendum leo vitae erat consequat condimentum. Nullam nec dictum turpis. Sed et lectus rutrum, sollicitudin diam id, vulputate odio. Sed mollis risus non nisl condimentum, ut venenatis quam blandit. Integer iaculis consectetur faucibus.</p>
</div>
<div class="col-md-8" id="About">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris placerat accumsan aliquam. Nulla posuere mattis tellus ac feugiat. Curabitur non sem porttitor, mollis leo at, ultrices quam. Donec interdum, libero ac mattis imperdiet, massa enim aliquet lacus, accumsan vehicula nisi purus id ipsum. Maecenas convallis accumsan orci. Integer a consequat tortor, accumsan malesuada diam. Sed lobortis iaculis ultrices. In a magna vulputate, ultricies sem sed, vehicula justo.</p>
<p>Suspendisse sed rutrum nisl. Etiam egestas augue id turpis imperdiet hendrerit. Aliquam in odio feugiat nunc bibendum gravida. Nulla auctor tincidunt est eget gravida. Vivamus ac rhoncus metus, y la Oficina de dui. Morbi a augue venenatis, sollicitudin , y es, accumsan purus. Duis mattis sodales ipsum in condimentum. Pellentesque eleifend, leo in aliquet aliquet, mi conexión a Internet fringilla nisi, vitae congue turpis mauris in magna. Curabitur eget nunc id massa ultricies volutpat sed sed ipsum. Ut vestibulum risus eu vulputate porta. Vestibulum orci augue, tincidunt quis est non, dictum varius augue. Etiam nec libero consectetur, aliquam odio vel, consectetur lectus. In hendrerit scelerisque quam quis adipiscing. Integer viverra rhoncus ante ut semper. Duis ut tincidunt risus, non convallis neque.</p>
<p>Donec vel hendrerit ahora, y varius nisl. Quisque tincidunt rutrum interdum. Suspendisse auctor adipiscing lectus, at varius erat blandit vitae. Fusce sed lorem odio. Mauris vitae lacinia purus. In facilisis dictum justo rutrum sagittis. Proin lobortis tortor dui, eget bibendum massa porttitor quis. Donec bibendum leo vitae erat consequat condimentum. Nullam nec dictum turpis. Sed et lectus rutrum, sollicitudin diam id, vulputate odio. Sed mollis risus non nisl condimentum, ut venenatis quam blandit. Integer iaculis consectetur faucibus.</p>
</div>
<div class="col-md-8" id="Services">
<h1>Services</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris placerat accumsan aliquam. Nulla posuere mattis tellus ac feugiat. Curabitur non sem porttitor, mollis leo at, ultrices quam. Donec interdum, libero ac mattis imperdiet, massa enim aliquet lacus, accumsan vehicula nisi purus id ipsum. Maecenas convallis accumsan orci. Integer a consequat tortor, accumsan malesuada diam. Sed lobortis iaculis ultrices. In a magna vulputate, ultricies sem sed, vehicula justo.</p>
<p>Suspendisse sed rutrum nisl. Etiam egestas augue id turpis imperdiet hendrerit. Aliquam in odio feugiat nunc bibendum gravida. Nulla auctor tincidunt est eget gravida. Vivamus ac rhoncus metus, y la Oficina de dui. Morbi a augue venenatis, sollicitudin , y es, accumsan purus. Duis mattis sodales ipsum in condimentum. Pellentesque eleifend, leo in aliquet aliquet, mi conexión a Internet fringilla nisi, vitae congue turpis mauris in magna. Curabitur eget nunc id massa ultricies volutpat sed sed ipsum. Ut vestibulum risus eu vulputate porta. Vestibulum orci augue, tincidunt quis est non, dictum varius augue. Etiam nec libero consectetur, aliquam odio vel, consectetur lectus. In hendrerit scelerisque quam quis adipiscing. Integer viverra rhoncus ante ut semper. Duis ut tincidunt risus, non convallis neque.</p>
<p>Donec vel hendrerit ahora, y varius nisl. Quisque tincidunt rutrum interdum. Suspendisse auctor adipiscing lectus, at varius erat blandit vitae. Fusce sed lorem odio. Mauris vitae lacinia purus. In facilisis dictum justo rutrum sagittis. Proin lobortis tortor dui, eget bibendum massa porttitor quis. Donec bibendum leo vitae erat consequat condimentum. Nullam nec dictum turpis. Sed et lectus rutrum, sollicitudin diam id, vulputate odio. Sed mollis risus non nisl condimentum, ut venenatis quam blandit. Integer iaculis consectetur faucibus.</p>
</div>
<div class="col-md-8" id="Contact">
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris placerat accumsan aliquam. Nulla posuere mattis tellus ac feugiat. Curabitur non sem porttitor, mollis leo at, ultrices quam. Donec interdum, libero ac mattis imperdiet, massa enim aliquet lacus, accumsan vehicula nisi purus id ipsum. Maecenas convallis accumsan orci. Integer a consequat tortor, accumsan malesuada diam. Sed lobortis iaculis ultrices. In a magna vulputate, ultricies sem sed, vehicula justo.</p>
<p>Suspendisse sed rutrum nisl. Etiam egestas augue id turpis imperdiet hendrerit. Aliquam in odio feugiat nunc bibendum gravida. Nulla auctor tincidunt est eget gravida. Vivamus ac rhoncus metus, y la Oficina de dui. Morbi a augue venenatis, sollicitudin , y es, accumsan purus. Duis mattis sodales ipsum in condimentum. Pellentesque eleifend, leo in aliquet aliquet, mi conexión a Internet fringilla nisi, vitae congue turpis mauris in magna. Curabitur eget nunc id massa ultricies volutpat sed sed ipsum. Ut vestibulum risus eu vulputate porta. Vestibulum orci augue, tincidunt quis est non, dictum varius augue. Etiam nec libero consectetur, aliquam odio vel, consectetur lectus. In hendrerit scelerisque quam quis adipiscing. Integer viverra rhoncus ante ut semper. Duis ut tincidunt risus, non convallis neque.</p>
<p>Donec vel hendrerit ahora, y varius nisl. Quisque tincidunt rutrum interdum. Suspendisse auctor adipiscing lectus, at varius erat blandit vitae. Fusce sed lorem odio. Mauris vitae lacinia purus. In facilisis dictum justo rutrum sagittis. Proin lobortis tortor dui, eget bibendum massa porttitor quis. Donec bibendum leo vitae erat consequat condimentum. Nullam nec dictum turpis. Sed et lectus rutrum, sollicitudin diam id, vulputate odio. Sed mollis risus non nisl condimentum, ut venenatis quam blandit. Integer iaculis consectetur faucibus.</p>
</div>
</div>
</div>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
/* Smooth scrolling */
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
/* Active styles on scroll */
jQuery(window).bind('scroll',function() {
var vPos = jQuery(window).scrollTop(); //The current scroll bar position
var totalH = jQuery('#Home').offset().top; // Distance content from top
var finalSize = totalH - vPos; // Get the difference of the distances
console.log(finalSize);
if (finalSize <= 50) {
jQuery('.navbar').fadeIn(600);
jQuery('#link01').css('border-bottom', '4px solid #ff8336'); /* ID of link clicked */
jQuery('#link02, #link03, #link04').css('border-bottom', 'none'); /* list IDs of all other links */
} else {
jQuery('#link01').css('border-bottom', 'none'); /* ID of link clicked */
}
});
jQuery(window).bind('scroll',function() {
var vPos = jQuery(window).scrollTop(); //The current scroll bar position
var totalH = jQuery('#About').offset().top; // Distance content from top
var finalSize = totalH - vPos; // Get the difference of the distances
console.log(finalSize);
if (finalSize <= 50) {
jQuery('.navbar').fadeIn(600);
jQuery('#link02').css('border-bottom', '4px solid #ff8336');
jQuery('#link01, #link03, #link04').css('border-bottom', 'none');
} else {
jQuery('#link02').css('border-bottom', 'none');
}
});
jQuery(window).bind('scroll',function() {
var vPos = jQuery(window).scrollTop(); //The current scroll bar position
var totalH = jQuery('#Services').offset().top; // Distance content from top
var finalSize = totalH - vPos; // Get the difference of the distances
console.log(finalSize);
if (finalSize <= 50) {
jQuery('.navbar').fadeIn(600);
jQuery('#link03').css('border-bottom', '4px solid #ff8336');
jQuery('#link01, #link02, #link04').css('border-bottom', 'none');
} else {
jQuery('#link03').css('border-bottom', 'none');
}
});
jQuery(window).bind('scroll',function() {
var vPos = jQuery(window).scrollTop(); //The current scroll bar position
var totalH = jQuery('#Contact').offset().top; // Distance content from top
var finalSize = totalH - vPos; // Get the difference of the distances
console.log(finalSize);
if (finalSize <= 50) {
jQuery('.navbar').fadeIn(600);
jQuery('#link04').css('border-bottom', '4px solid #ff8336');
jQuery('#link01, #link02, #link03').css('border-bottom', 'none');
} else {
jQuery('#link04').css('border-bottom', 'none');
}
});
</script>
</body>
</html>