Fixed header
Waar kijk ik over heen?
http://caniuse.com/#feat=css-sticky
En toen werkte het. Dus dit word alleen ondersteund in Firefox, Safari en Opera.
Ik ben bang dat er geen andere uitweg is om jQuery hiervoor te gebruiken als je browser compatibility wil, maar dan krijg je inderdaad die vertraging.
Als je dat niets uitmaakt, zou je even kunnen kijken naar:
https://developer.apple.com/assets/scripts/global.js -> $(window).scroll(function() {
Het zou een combinatie kunnen zijn met jQuery & position: sticky.
Code (php)
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
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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>sticky navigation</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
<!--
html { height: 100%; margin: 0; padding: 0; }
body { height: 100%; margin: 0; padding: 0; }
div.wrapper { margin: 0 auto; width: 850px; min-height: 100%; position: relative; background-color: #f0f0ff; }
div.header { width: 850px; height: 100px; background-color: #ffd0d0; }
div.nav-wrapper { min-height: 50px; } /* voor het tegengaan van het verspringen van #navigation */
div.navbox-1 { width: 850px; height: 25px; line-height: 25px; background-color: #d0ffd0; }
div.navbox-2 { width: 850px; height: 25px; line-height: 25px; background-color: #b0ffb0; }
div#navigation.sticky { position: fixed; top: 0; z-index: 1; }
//-->
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="nav-wrapper">
<div id="navigation">
<div class="navbox-1">link 1 - link 2 - link 3</div>
<div class="navbox-2">link 4 - link 5 - link 6</div>
</div>
</div>
<div class="main">
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />content<br />
</div>
</div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$(document).scroll(function(e) {
if ($(document).scrollTop() > 100) {
$('div#navigation').addClass('sticky');
} else {
$('div#navigation').removeClass('sticky');
}
});
});
//]]>
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>sticky navigation</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
<!--
html { height: 100%; margin: 0; padding: 0; }
body { height: 100%; margin: 0; padding: 0; }
div.wrapper { margin: 0 auto; width: 850px; min-height: 100%; position: relative; background-color: #f0f0ff; }
div.header { width: 850px; height: 100px; background-color: #ffd0d0; }
div.nav-wrapper { min-height: 50px; } /* voor het tegengaan van het verspringen van #navigation */
div.navbox-1 { width: 850px; height: 25px; line-height: 25px; background-color: #d0ffd0; }
div.navbox-2 { width: 850px; height: 25px; line-height: 25px; background-color: #b0ffb0; }
div#navigation.sticky { position: fixed; top: 0; z-index: 1; }
//-->
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="nav-wrapper">
<div id="navigation">
<div class="navbox-1">link 1 - link 2 - link 3</div>
<div class="navbox-2">link 4 - link 5 - link 6</div>
</div>
</div>
<div class="main">
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />content<br />
</div>
</div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$(document).scroll(function(e) {
if ($(document).scrollTop() > 100) {
$('div#navigation').addClass('sticky');
} else {
$('div#navigation').removeClass('sticky');
}
});
});
//]]>
</script>
</body>
</html>
Gewijzigd op 09/06/2015 13:55:01 door Thomas van den Heuvel
Vandaar ook die div.nav-wrapper in het bovenstaande stuk code, zie ook de toelichting in CSS: /* voor het tegengaan van het verspringen van #navigation */
Laat die div maar eens weg, dan verspringt er dus wel het een en ander als je gaat scrollen.
Gewijzigd op 09/06/2015 22:43:33 door Thomas van den Heuvel