Ich werde immer wieder gefragt wie man denn so einen fixierten Header Bereich programmieren tut. Diese Technik sieht man heute fast überall, da sie sehr einfach zu programmieren ist und auch sehr effektvoll ist.

Heute möchte ich euch mal ganz kurz Zeigen, wie so ein fixierter Header genau funktioniert. Und zwar mit ein wenig CSS und HTML sowie unter Mithilfe von jQuery ist es wirklich einfach sowas zu machen.

Als erstes öffnet ihr ein HTML File, danach baut ihr den ganzen Standardinhalt ein head/ body usw…

Danach bindet ihr das jQuery ein – da reicht das jquery.min.js

1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Danach müsst ihr kurz noch ein klein wenig Javascript einbauen, damit jQuery hier seine Arbeit tun kann:

1
2
3
4
5
6
7
8
9
10
11
<script>
 
$(window).scroll(function() {
    if ($(this).scrollTop() > 1){  
        $('header').addClass("sticky");
    }
    else{
        $('header').removeClass("sticky");
    }
});
</script>

Nun definiert ihr nach dem Start des Body Tag den Headerbereich. Darin wird dann der ganze fixierte Headerbereich definiert.

1
<header><h1>Der fixierte Header-Bereich</h1></header>

Danach müsst ihr euch nur noch um das aussehen, des fixierten Headerbereich kümmern, dafür einfach CSS nehmen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
header{
            position: fixed;
            width: 100%;
            text-align: center;
            font-size: 72px;
            line-height: 108px;
            height: 108px;
            background: #335C7D;
            color: #fff;
            
            // set animation
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }
 
        header.sticky {
            font-size: 24px;
            line-height: 48px;
            height: 48px; 
            background: #efc47D;
            text-align: left;
            padding-left: 20px;
        }

Vergisst nicht die Web Kit Transition auch einzufügen, da ist nämlich der Befehl der Verkleinerungsanimation

In meinem Beispiel habe ich noch Google Font eingebunden, damit ich ein wenig mit der Schrift spielen kann. Hier seht ihr nun den ganzen Code:

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
<!DOCTYPE html>
<html>
<head>
    <title>fixierter Header</title>
 
    <!-- import Google font -->
    <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
 
    <style>
 
        /** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}
 
 
        header{
            position: fixed;
            width: 100%;
            text-align: center;
            font-size: 72px;
            line-height: 108px;
            height: 108px;
            background: #335C7D;
            color: #fff;
            font-family: 'PT Sans', sans-serif;
 
            // set animation
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }
 
        header.sticky {
            font-size: 24px;
            line-height: 48px;
            height: 48px; 
            background: #efc47D;
            text-align: left;
            padding-left: 20px;
        }
 
    </style>
 
</head>
<body>
 
<!-- our markup -->
<header><h1>Der fixierte Header-Bereich</h1></header>
 
<!-- an image for demonstration purposes -->
<img src="large-image.jpg" width="782" height="2000" alt="Big Image"/>
 
<!-- import jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 
<!-- write script to toggle class on scroll -->
<script>
 
$(window).scroll(function() {
    if ($(this).scrollTop() > 1){  
        $('header').addClass("sticky");
    }
    else{
        $('header').removeClass("sticky");
    }
});
</script>
</body>
</html>

Fazit:

Wie ihr sehen könnt, ist es wirklich keine Hexerei mehr sowas zu programmieren.

Hier könnt ihr nun das Ganze noch live sehen – DEMO

Ich hoffe diese keine Anleitung hilft euch bei eurem nächsten Projekt

Über

Eric-Oliver Mächler

Seit 2005 bin ich ein aktiver Blogger. Ich kenne die Kniffe und die Tricks um einen Blog erfolgreich zu machen. Hier gebe ich diese kleinen Tricks gerne weiter und freue mich, wenn ich euch helfen kann. Hier erfährt man mehr über mich.

Hinterlass einen Kommentar